@sonic-equipment/ui 0.0.85 → 0.0.87
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +9 -6
- package/dist/index.js +224 -108
- package/dist/src/buttons/icon-button/icon-button.d.ts +1 -1
- package/dist/src/index.d.ts +1 -0
- package/dist/src/notifications/announcements/announcement-provider.d.ts +1 -0
- package/dist/src/notifications/announcements/announcement.d.ts +6 -0
- package/dist/src/notifications/announcements/announcement.stories.d.ts +16 -0
- package/dist/src/notifications/announcements/connected-announcement.d.ts +4 -0
- package/dist/src/pages/product-listing-page/product-listing-page.d.ts +2 -2
- package/dist/src/shared/api/bff/hooks/use-fetch-announcements.d.ts +6 -0
- package/dist/src/shared/api/bff/model/announcement.model.d.ts +11 -0
- package/dist/src/shared/feature-flags/use-feature-flags.d.ts +3 -2
- package/dist/src/shared/hooks/use-local-storage.d.ts +6 -0
- package/dist/src/shared/model/announcement.d.ts +13 -0
- package/dist/styles.css +140 -1
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -126,8 +126,9 @@ declare const request: Request;
|
|
|
126
126
|
|
|
127
127
|
declare const features: {
|
|
128
128
|
readonly pdp: "pdpV2";
|
|
129
|
-
readonly
|
|
130
|
-
readonly
|
|
129
|
+
readonly pdpv1: "pdpV1";
|
|
130
|
+
readonly plpv1: "plpV1";
|
|
131
|
+
readonly searchv1: "searchV1";
|
|
131
132
|
};
|
|
132
133
|
type FeatureKeys = keyof typeof features;
|
|
133
134
|
type FeatureValues = (typeof features)[FeatureKeys];
|
|
@@ -4287,7 +4288,7 @@ declare function FavoriteButton({ isDisabled, isFavorite, onPress, }: FavoriteBu
|
|
|
4287
4288
|
interface IconButtonProps {
|
|
4288
4289
|
children: React.ReactNode;
|
|
4289
4290
|
className?: string;
|
|
4290
|
-
color?: 'primary' | 'secondary';
|
|
4291
|
+
color?: 'primary' | 'secondary' | 'current-color';
|
|
4291
4292
|
isDisabled?: boolean;
|
|
4292
4293
|
onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
|
|
4293
4294
|
size?: 'md' | 'lg';
|
|
@@ -4557,6 +4558,8 @@ interface ImageProps {
|
|
|
4557
4558
|
}
|
|
4558
4559
|
declare function Image({ className, fallbackSrc, fit, height, image, loading, title, width, }: ImageProps): react_jsx_runtime.JSX.Element;
|
|
4559
4560
|
|
|
4561
|
+
declare function AnnouncementProvider(): react_jsx_runtime.JSX.Element;
|
|
4562
|
+
|
|
4560
4563
|
declare function PageContainer({ children, className, }: {
|
|
4561
4564
|
children: ReactNode;
|
|
4562
4565
|
className?: string;
|
|
@@ -4596,9 +4599,9 @@ interface Filters {
|
|
|
4596
4599
|
}
|
|
4597
4600
|
interface ProductListingPageProps {
|
|
4598
4601
|
pageUrl: string;
|
|
4599
|
-
searchClient
|
|
4602
|
+
searchClient: SearchClient;
|
|
4600
4603
|
}
|
|
4601
|
-
declare function ProductListingPage({ pageUrl, searchClient
|
|
4604
|
+
declare function ProductListingPage({ pageUrl, searchClient, }: ProductListingPageProps): react_jsx_runtime.JSX.Element;
|
|
4602
4605
|
|
|
4603
4606
|
interface Location {
|
|
4604
4607
|
hash?: string;
|
|
@@ -4946,4 +4949,4 @@ declare function ReactQueryContainer({ children }: {
|
|
|
4946
4949
|
children: ReactNode;
|
|
4947
4950
|
}): react_jsx_runtime.JSX.Element;
|
|
4948
4951
|
|
|
4949
|
-
export { Accordion, type AccountCollectionModel, type AccountModel, type AccountPaymentProfileCollectionModel, type AccountPaymentProfileModel, type AccountSettingsModel, type AccountShipToCollectionModel, type AccountShipToModel, type AccountsReceivableDto$1 as AccountsReceivableDto, type AddProductToCurrentCartParams$1 as AddProductToCurrentCartParams, AddToCartButton, type AddressFieldCollectionModel, type AddressFieldDisplayCollectionModel, type AddressFieldDisplayModel, type AgingBucketDto$1 as AgingBucketDto, AlgoliaActiveCategories, AlgoliaCategoriesFilters, AlgoliaFilterPanel, type AlgoliaFilterPanelProps, AlgoliaInsightsProvider, AlgoliaInsightsProviderContext, type AlgoliaInsightsProviderState, AlgoliaMultiSelectFilterSection, AlgoliaPagination, AlgoliaProvider, AlgoliaResultsCount, AlgoliaSortBy, type AttributeTypeDto, type AttributeTypeFacetModel, type AttributeTypeModel, type AttributeValueDto, type AttributeValueFacetModel, type AttributeValueModel, type AuthenticationResponse$1 as AuthenticationResponse, type AutocompleteItemModel, type AutocompleteModel, type AutocompleteProductCollectionModel, type AutocompleteProductModel, type AvailabilityDto$2 as AvailabilityDto, AvailabilityMessageType$2 as AvailabilityMessageType, BadRequestError, BadgeImagePlacementValues, type BadgeModel, BadgeStyleValues, BadgeTypeValues, type BaseAddressModel, type BaseModel$1 as BaseModel, type BillToCollectionModel, type BillToModel$1 as BillToModel, type BrandAlphabetLetterModel, type BrandAlphabetModel, type BrandAutocompleteModel, type BrandCategoryCollectionModel, type BrandCategoryModel, type BrandCollectionModel, type BrandDto$2 as BrandDto, type BrandModel, type BrandProductLineCollectionModel, type BrandProductLineModel, type BreadCrumbModel, Breadcrumb, type BreadcrumbLink$1 as BreadcrumbLink, type BreadcrumbProps, type BreakPriceDto$2 as BreakPriceDto, type BreakPriceRfqModel, type BudgetCalendarCollectionModel, type BudgetCalendarModel, type BudgetCollectionModel, type BudgetLineModel, type BudgetModel, Button, type ButtonProps, type CalculationMethod, type CarrierDto, type CartCollectionModel, type CartLineCollectionModel, type CartLineModel$2 as CartLineModel, type CartModel, CartProvider, type CartSettingsModel, type CatalogPageModel, CategoryCarousel, type CategoryCarouselProps, type CategoryCollectionModel, type CategoryFacetModel, type CategoryModel, Checkbox, type CheckboxProps$1 as CheckboxProps, type ChildTraitValueModel, ColorCheckbox, type ColorCheckboxProps, type ConfigSectionDto, type ConfigSectionModel, type ConfigSectionOptionDto, type ConfigurationModel, ConnectedAddToCartButton, type ContactUsModel, type ContentModel, type CostCodeDto, type CostCodeModel$1 as CostCodeModel, type CountryCollectionModel, type CountryModel$1 as CountryModel, type CreateSessionRequestBody, type CreditCardBillingAddressDto, type CreditCardDto, type CrossSellCollectionModel, type CurrencyCollectionModel, type CurrencyModel$1 as CurrencyModel, CurrencyPositioningType$1 as CurrencyPositioningType, type CustomerCostCodeDto, type CustomerOrderTaxDto, type CustomerSettingsModel, type CustomerValidationDto$1 as CustomerValidationDto, type DashboardPanelCollectionModel, type DashboardPanelModel, type DealerCollectionModel, type DealerModel, type DetailModel, type DocumentDto, type DocumentModel, type ECheckDto, type Environment, type FacetModel, FavoriteButton, type FavoriteButtonProps, FavoriteProvider, type FieldScoreDetailedDto, type FieldScoreDetailedModel, type FieldScoreDto, type FieldScoreModel, type FieldValidationDto$1 as FieldValidationDto, type FilterOption, FilterSection, type Filters, ForbiddenRequestError, FormattedMessage, type FormattedMessageFunction, type FormattedMessageProps, GlobalSearch, GlobalSearchDisclosureContext, GlobalSearchProvider, GlobalStateProvider, GlobalStateProviderContext, IconButton, type IconButtonProps, Image, type ImageModel, InternalServerErrorRequest, IntlProvider, type InventoryAvailabilityDto, type InventoryWarehousesDto, type InvoiceCollectionModel, type InvoiceHistoryTaxDto, type InvoiceLineModel, type InvoiceModel, type InvoiceSettingsModel, type JobQuoteCollectionModel, type JobQuoteLineModel, type JobQuoteModel, type LanguageCollectionModel, type LanguageModel$1 as LanguageModel, type LegacyConfigurationDto, Link, type LinkProps, LoadingOverlay, type MessageCollectionModel, type MessageModel, type MobileAppSettingsModel, type MobileContentModel, type MobilePageDto, type MobileWidgetDto, MultiSelect, type MultiSelectProps, type NavigateFn, type NavigateOptions, NotFoundRequestError, NumberField, type NumberFieldSize, type OrderApprovalCollectionModel, type OrderCollectionModel, type OrderHistoryTaxDto, type OrderLineModel, type OrderModel, type OrderPromotionModel, type OrderRequestModel, type OrderSettingsModel, type OrderStatusMappingCollectionModel, type OrderStatusMappingModel, Page, PageContainer, type PageProps, type PaginationModel$1 as PaginationModel, type PaymentMethodDto, type PaymentOptionsDto, type PersonaModel$1 as PersonaModel, type PoRequisitionModel, type PriceFacetModel, type PriceRangeModel, type PricingRfqModel, type ProductAutocompleteItemModel, type ProductAvailabilityModel, ProductCard, type ProductCardProps, type ProductCollectionModel, ProductDetailsPage, type ProductDetailsPageProps, type ProductDto, type ProductHit$1 as ProductHit, type ProductImageDto, type ProductInventoryDto, type ProductLineDto, type ProductLineModel, ProductListingPage, type ProductListingPageProps, type ProductModel, ProductOverviewGrid, type ProductOverviewGridProps, ProductPrice, type ProductPriceDto$2 as ProductPriceDto, type ProductPriceModel, type ProductPriceProps, type ProductSettingsModel, ProductSku, type ProductSkuProps, type ProductSubscriptionDto$2 as ProductSubscriptionDto, type ProductSubscriptionModel, type ProductUnitOfMeasureDto$1 as ProductUnitOfMeasureDto, type ProfileTransactionRequestModel, ProgressCircle, type ProgressCircleProps, type PromotionCollectionModel, type PromotionModel, type QuoteCollectionModel, type QuoteLineModel, type QuoteModel, type QuoteSettingsModel, ReactQueryContainer, type RealTimeCartInventoryModel, type RealTimeInventoryModel, type RealTimePricingModel, type RefinementListItem, type RelatedProductDto, RequestError, type RequestHeaders, type RequisitionCollectionModel, type RequisitionLineCollectionModel, type RequisitionLineModel, type RequisitionModel, type RmaLineDto, type RmaModel, RouteButton, RouteLink, RouteProvider, type RouteProviderProps, type SalespersonModel, type ScoreExplanationDto, type ScoreExplanationModel, SearchResultsPage, SearchRoot, type SectionOptionDto$2 as SectionOptionDto, type SectionOptionModel, Select, type SelectProps, type SessionModel$1 as SessionModel, type SessionRequestModel, type SettingsCollectionModel, type SetupRequestModel, type ShareEntityModel, type ShareOrderModel, type ShipToCollectionModel, type ShipToModel$1 as ShipToModel, type ShipViaDto, type ShipmentPackageDto, type ShipmentPackageLineDto, ShowAll, type ShowAllPropsControlled, type ShowAllPropsUncontrolled, Sidebar, SidebarDetectBreakpoint, type SidebarProps, SidebarProvider, type SiteMessageCollectionModel, type SiteMessageModel, type SortOptionModel$1 as SortOptionModel, type SpecificationDto, type SpecificationModel, type StateCollectionModel, type StateModel$1 as StateModel, type StyleTraitDto, type StyleValueDto, type StyledProductDto, type SuggestionModel, type TellAFriendModel, TextField, TimeoutRequestError, type TraitValueModel, type TranslationDictionaryCollectionModel, type TranslationDictionaryModel, type TranslationId, UnauthorizedRequestError, type UnitOfMeasureModel, UnprocessableContentRequestError, type UpdateCartLineParams, type UpdateGlobalState$1 as UpdateGlobalState, type UpdateWishListLineCollectionModel, type UseAlgoliaEventResult, VariantDisplayTypeValues, type VariantTraitModel, type VmiBinCollectionModel, type VmiBinCountModel, type VmiBinModel, type VmiCountCollectionModel, type VmiCountModel, type VmiLocationCollectionModel, type VmiLocationModel, type VmiNoteCollectionModel, type VmiNoteModel, type VmiUserImportCollectionModel, type VmiUserImportModel, type VmiUserModel, type WarehouseCollectionModel, type WarehouseDto, type WarehouseModel$1 as WarehouseModel, type WebsiteModel, type WebsiteSettingsModel, type WishListCollectionModel$1 as WishListCollectionModel, type WishListEmailScheduleModel$1 as WishListEmailScheduleModel, type WishListLine$1 as WishListLine, type WishListLineCollectionModel$1 as WishListLineCollectionModel, type WishListLineModel$1 as WishListLineModel, type WishListLines$1 as WishListLines, type WishListModel$1 as WishListModel, WishListNameAlreadyExistsError, type WishListSettingsModel, type WishListShareModel$1 as WishListShareModel, addProductToCurrentCart, addWishListItemToWishList, config, configPerEnvironment, createSession, createSonicSearchClient, createWishList, deleteCartLineById, deleteWishList, deleteWishListItemFromWishList, environment, environments, fetchCurrentCartLines, fetchTranslations, getSession, getWishList, getWishListItemsByWishListId, getWishLists, isRequestError, request, signIn, signOut, transformAlgoliaProductHitToProductHit, updateCartLineById, useAddProductToCurrentCart, useAddWishListItemToCurrentWishList, useAddWishListItemToWishList, useAlgolia, useAlgoliaInsights, useAlgoliaSearch, useBreakpoint, useCartEvents, useCreateWishList, useDebouncedCallback, useDeleteCartLineById, useDeleteWishListItemFromWishList, useDisclosure, useFavorite, useFavoriteProduct, useFeatureFlags, useFetchAllWishListsItems, useFetchCurrentCartLines, useFetchTranslations, useFetchWishLists, useFormattedMessage, useGlobalSearchDisclosure, useGlobalState, useIsAuthenticated, useIsBreakpoint, useNavigate, useOnNavigate, useScrollLock, useSession, useSignIn, useSignOut, useUpdateCartLineById, userToken };
|
|
4952
|
+
export { Accordion, type AccountCollectionModel, type AccountModel, type AccountPaymentProfileCollectionModel, type AccountPaymentProfileModel, type AccountSettingsModel, type AccountShipToCollectionModel, type AccountShipToModel, type AccountsReceivableDto$1 as AccountsReceivableDto, type AddProductToCurrentCartParams$1 as AddProductToCurrentCartParams, AddToCartButton, type AddressFieldCollectionModel, type AddressFieldDisplayCollectionModel, type AddressFieldDisplayModel, type AgingBucketDto$1 as AgingBucketDto, AlgoliaActiveCategories, AlgoliaCategoriesFilters, AlgoliaFilterPanel, type AlgoliaFilterPanelProps, AlgoliaInsightsProvider, AlgoliaInsightsProviderContext, type AlgoliaInsightsProviderState, AlgoliaMultiSelectFilterSection, AlgoliaPagination, AlgoliaProvider, AlgoliaResultsCount, AlgoliaSortBy, AnnouncementProvider, type AttributeTypeDto, type AttributeTypeFacetModel, type AttributeTypeModel, type AttributeValueDto, type AttributeValueFacetModel, type AttributeValueModel, type AuthenticationResponse$1 as AuthenticationResponse, type AutocompleteItemModel, type AutocompleteModel, type AutocompleteProductCollectionModel, type AutocompleteProductModel, type AvailabilityDto$2 as AvailabilityDto, AvailabilityMessageType$2 as AvailabilityMessageType, BadRequestError, BadgeImagePlacementValues, type BadgeModel, BadgeStyleValues, BadgeTypeValues, type BaseAddressModel, type BaseModel$1 as BaseModel, type BillToCollectionModel, type BillToModel$1 as BillToModel, type BrandAlphabetLetterModel, type BrandAlphabetModel, type BrandAutocompleteModel, type BrandCategoryCollectionModel, type BrandCategoryModel, type BrandCollectionModel, type BrandDto$2 as BrandDto, type BrandModel, type BrandProductLineCollectionModel, type BrandProductLineModel, type BreadCrumbModel, Breadcrumb, type BreadcrumbLink$1 as BreadcrumbLink, type BreadcrumbProps, type BreakPriceDto$2 as BreakPriceDto, type BreakPriceRfqModel, type BudgetCalendarCollectionModel, type BudgetCalendarModel, type BudgetCollectionModel, type BudgetLineModel, type BudgetModel, Button, type ButtonProps, type CalculationMethod, type CarrierDto, type CartCollectionModel, type CartLineCollectionModel, type CartLineModel$2 as CartLineModel, type CartModel, CartProvider, type CartSettingsModel, type CatalogPageModel, CategoryCarousel, type CategoryCarouselProps, type CategoryCollectionModel, type CategoryFacetModel, type CategoryModel, Checkbox, type CheckboxProps$1 as CheckboxProps, type ChildTraitValueModel, ColorCheckbox, type ColorCheckboxProps, type ConfigSectionDto, type ConfigSectionModel, type ConfigSectionOptionDto, type ConfigurationModel, ConnectedAddToCartButton, type ContactUsModel, type ContentModel, type CostCodeDto, type CostCodeModel$1 as CostCodeModel, type CountryCollectionModel, type CountryModel$1 as CountryModel, type CreateSessionRequestBody, type CreditCardBillingAddressDto, type CreditCardDto, type CrossSellCollectionModel, type CurrencyCollectionModel, type CurrencyModel$1 as CurrencyModel, CurrencyPositioningType$1 as CurrencyPositioningType, type CustomerCostCodeDto, type CustomerOrderTaxDto, type CustomerSettingsModel, type CustomerValidationDto$1 as CustomerValidationDto, type DashboardPanelCollectionModel, type DashboardPanelModel, type DealerCollectionModel, type DealerModel, type DetailModel, type DocumentDto, type DocumentModel, type ECheckDto, type Environment, type FacetModel, FavoriteButton, type FavoriteButtonProps, FavoriteProvider, type FieldScoreDetailedDto, type FieldScoreDetailedModel, type FieldScoreDto, type FieldScoreModel, type FieldValidationDto$1 as FieldValidationDto, type FilterOption, FilterSection, type Filters, ForbiddenRequestError, FormattedMessage, type FormattedMessageFunction, type FormattedMessageProps, GlobalSearch, GlobalSearchDisclosureContext, GlobalSearchProvider, GlobalStateProvider, GlobalStateProviderContext, IconButton, type IconButtonProps, Image, type ImageModel, InternalServerErrorRequest, IntlProvider, type InventoryAvailabilityDto, type InventoryWarehousesDto, type InvoiceCollectionModel, type InvoiceHistoryTaxDto, type InvoiceLineModel, type InvoiceModel, type InvoiceSettingsModel, type JobQuoteCollectionModel, type JobQuoteLineModel, type JobQuoteModel, type LanguageCollectionModel, type LanguageModel$1 as LanguageModel, type LegacyConfigurationDto, Link, type LinkProps, LoadingOverlay, type MessageCollectionModel, type MessageModel, type MobileAppSettingsModel, type MobileContentModel, type MobilePageDto, type MobileWidgetDto, MultiSelect, type MultiSelectProps, type NavigateFn, type NavigateOptions, NotFoundRequestError, NumberField, type NumberFieldSize, type OrderApprovalCollectionModel, type OrderCollectionModel, type OrderHistoryTaxDto, type OrderLineModel, type OrderModel, type OrderPromotionModel, type OrderRequestModel, type OrderSettingsModel, type OrderStatusMappingCollectionModel, type OrderStatusMappingModel, Page, PageContainer, type PageProps, type PaginationModel$1 as PaginationModel, type PaymentMethodDto, type PaymentOptionsDto, type PersonaModel$1 as PersonaModel, type PoRequisitionModel, type PriceFacetModel, type PriceRangeModel, type PricingRfqModel, type ProductAutocompleteItemModel, type ProductAvailabilityModel, ProductCard, type ProductCardProps, type ProductCollectionModel, ProductDetailsPage, type ProductDetailsPageProps, type ProductDto, type ProductHit$1 as ProductHit, type ProductImageDto, type ProductInventoryDto, type ProductLineDto, type ProductLineModel, ProductListingPage, type ProductListingPageProps, type ProductModel, ProductOverviewGrid, type ProductOverviewGridProps, ProductPrice, type ProductPriceDto$2 as ProductPriceDto, type ProductPriceModel, type ProductPriceProps, type ProductSettingsModel, ProductSku, type ProductSkuProps, type ProductSubscriptionDto$2 as ProductSubscriptionDto, type ProductSubscriptionModel, type ProductUnitOfMeasureDto$1 as ProductUnitOfMeasureDto, type ProfileTransactionRequestModel, ProgressCircle, type ProgressCircleProps, type PromotionCollectionModel, type PromotionModel, type QuoteCollectionModel, type QuoteLineModel, type QuoteModel, type QuoteSettingsModel, ReactQueryContainer, type RealTimeCartInventoryModel, type RealTimeInventoryModel, type RealTimePricingModel, type RefinementListItem, type RelatedProductDto, RequestError, type RequestHeaders, type RequisitionCollectionModel, type RequisitionLineCollectionModel, type RequisitionLineModel, type RequisitionModel, type RmaLineDto, type RmaModel, RouteButton, RouteLink, RouteProvider, type RouteProviderProps, type SalespersonModel, type ScoreExplanationDto, type ScoreExplanationModel, SearchResultsPage, SearchRoot, type SectionOptionDto$2 as SectionOptionDto, type SectionOptionModel, Select, type SelectProps, type SessionModel$1 as SessionModel, type SessionRequestModel, type SettingsCollectionModel, type SetupRequestModel, type ShareEntityModel, type ShareOrderModel, type ShipToCollectionModel, type ShipToModel$1 as ShipToModel, type ShipViaDto, type ShipmentPackageDto, type ShipmentPackageLineDto, ShowAll, type ShowAllPropsControlled, type ShowAllPropsUncontrolled, Sidebar, SidebarDetectBreakpoint, type SidebarProps, SidebarProvider, type SiteMessageCollectionModel, type SiteMessageModel, type SortOptionModel$1 as SortOptionModel, type SpecificationDto, type SpecificationModel, type StateCollectionModel, type StateModel$1 as StateModel, type StyleTraitDto, type StyleValueDto, type StyledProductDto, type SuggestionModel, type TellAFriendModel, TextField, TimeoutRequestError, type TraitValueModel, type TranslationDictionaryCollectionModel, type TranslationDictionaryModel, type TranslationId, UnauthorizedRequestError, type UnitOfMeasureModel, UnprocessableContentRequestError, type UpdateCartLineParams, type UpdateGlobalState$1 as UpdateGlobalState, type UpdateWishListLineCollectionModel, type UseAlgoliaEventResult, VariantDisplayTypeValues, type VariantTraitModel, type VmiBinCollectionModel, type VmiBinCountModel, type VmiBinModel, type VmiCountCollectionModel, type VmiCountModel, type VmiLocationCollectionModel, type VmiLocationModel, type VmiNoteCollectionModel, type VmiNoteModel, type VmiUserImportCollectionModel, type VmiUserImportModel, type VmiUserModel, type WarehouseCollectionModel, type WarehouseDto, type WarehouseModel$1 as WarehouseModel, type WebsiteModel, type WebsiteSettingsModel, type WishListCollectionModel$1 as WishListCollectionModel, type WishListEmailScheduleModel$1 as WishListEmailScheduleModel, type WishListLine$1 as WishListLine, type WishListLineCollectionModel$1 as WishListLineCollectionModel, type WishListLineModel$1 as WishListLineModel, type WishListLines$1 as WishListLines, type WishListModel$1 as WishListModel, WishListNameAlreadyExistsError, type WishListSettingsModel, type WishListShareModel$1 as WishListShareModel, addProductToCurrentCart, addWishListItemToWishList, config, configPerEnvironment, createSession, createSonicSearchClient, createWishList, deleteCartLineById, deleteWishList, deleteWishListItemFromWishList, environment, environments, fetchCurrentCartLines, fetchTranslations, getSession, getWishList, getWishListItemsByWishListId, getWishLists, isRequestError, request, signIn, signOut, transformAlgoliaProductHitToProductHit, updateCartLineById, useAddProductToCurrentCart, useAddWishListItemToCurrentWishList, useAddWishListItemToWishList, useAlgolia, useAlgoliaInsights, useAlgoliaSearch, useBreakpoint, useCartEvents, useCreateWishList, useDebouncedCallback, useDeleteCartLineById, useDeleteWishListItemFromWishList, useDisclosure, useFavorite, useFavoriteProduct, useFeatureFlags, useFetchAllWishListsItems, useFetchCurrentCartLines, useFetchTranslations, useFetchWishLists, useFormattedMessage, useGlobalSearchDisclosure, useGlobalState, useIsAuthenticated, useIsBreakpoint, useNavigate, useOnNavigate, useScrollLock, useSession, useSignIn, useSignOut, useUpdateCartLineById, userToken };
|
package/dist/index.js
CHANGED
|
@@ -6,13 +6,13 @@ import { deepEqual } from 'fast-equals';
|
|
|
6
6
|
import clsx from 'clsx';
|
|
7
7
|
import { Breadcrumbs, Breadcrumb as Breadcrumb$1, FieldError as FieldError$1, useContextProps, InputContext, Input as Input$1, Label as Label$1, NumberField as NumberField$1, Button as Button$1, Checkbox as Checkbox$1, Select as Select$1, SelectValue, Popover, ListBox, Section, Header, ListBoxItem, TextAreaContext, TextArea as TextArea$1, TextField as TextField$1, ModalOverlay, Modal as Modal$1, Dialog as Dialog$1, Form } from 'react-aria-components';
|
|
8
8
|
import { usePress } from 'react-aria';
|
|
9
|
+
import { TransitionGroup, CSSTransition, Transition } from 'react-transition-group';
|
|
9
10
|
import { useHierarchicalMenu, useCurrentRefinements, useClearRefinements, useRefinementList, useHits, useDynamicWidgets, usePagination, useInstantSearch, InstantSearch, Configure, useSortBy } from 'react-instantsearch';
|
|
10
11
|
import { history } from 'instantsearch.js/es/lib/routers/index.js';
|
|
11
12
|
import { simple } from 'instantsearch.js/es/lib/stateMappings/index.js';
|
|
12
13
|
import algoliasearch from 'algoliasearch';
|
|
13
14
|
import aa from 'search-insights';
|
|
14
15
|
import ReactDOM from 'react-dom';
|
|
15
|
-
import { Transition, TransitionGroup } from 'react-transition-group';
|
|
16
16
|
import { createAutocomplete } from '@algolia/autocomplete-core';
|
|
17
17
|
import { getAlgoliaResults, parseAlgoliaHitHighlight } from '@algolia/autocomplete-preset-algolia';
|
|
18
18
|
import { createQuerySuggestionsPlugin } from '@algolia/autocomplete-plugin-query-suggestions';
|
|
@@ -364,8 +364,9 @@ const request = (function createRequestFunction() {
|
|
|
364
364
|
|
|
365
365
|
const features = {
|
|
366
366
|
pdp: 'pdpV2',
|
|
367
|
-
|
|
368
|
-
|
|
367
|
+
pdpv1: 'pdpV1',
|
|
368
|
+
plpv1: 'plpV1',
|
|
369
|
+
searchv1: 'searchV1',
|
|
369
370
|
};
|
|
370
371
|
const HAS_LOCAL_STORAGE_SUPPORT = typeof localStorage !== 'undefined';
|
|
371
372
|
function useFeatureFlags() {
|
|
@@ -376,9 +377,8 @@ function useFeatureFlags() {
|
|
|
376
377
|
};
|
|
377
378
|
return useMemo(() => {
|
|
378
379
|
const queryParams = qs.parse(search);
|
|
379
|
-
const
|
|
380
|
-
|
|
381
|
-
if (!showNewPageQueryValue && !hasQueryStringFeatures) {
|
|
380
|
+
const hasQueryStringFeatures = queryParams['features'] !== undefined && queryParams['features'] !== null;
|
|
381
|
+
if (!hasQueryStringFeatures) {
|
|
382
382
|
/* When no new feature flags are set get them from localStorage */
|
|
383
383
|
return Object.entries(features).reduce((acc, [, value]) => ({
|
|
384
384
|
...acc,
|
|
@@ -392,7 +392,7 @@ function useFeatureFlags() {
|
|
|
392
392
|
.split(',');
|
|
393
393
|
const featureResults = Object.entries(features).map(([key, value]) => ({
|
|
394
394
|
key: key,
|
|
395
|
-
selected:
|
|
395
|
+
selected: queryStringFeatures.includes(key),
|
|
396
396
|
value: value,
|
|
397
397
|
}));
|
|
398
398
|
featureResults.forEach(({ selected, value }) => {
|
|
@@ -1190,10 +1190,10 @@ function useNavigate() {
|
|
|
1190
1190
|
};
|
|
1191
1191
|
}
|
|
1192
1192
|
|
|
1193
|
-
var styles$
|
|
1193
|
+
var styles$13 = {"link":"link-module-xLqBn","has-underline":"link-module-UuCEp","secondary":"link-module-v31wH","primary":"link-module-bGD6u"};
|
|
1194
1194
|
|
|
1195
1195
|
function Link({ children, className, color = 'primary', hasUnderline, isDisabled, onClick, ...props }) {
|
|
1196
|
-
return (jsx("a", { className: clsx({ [styles$
|
|
1196
|
+
return (jsx("a", { className: clsx({ [styles$13['has-underline']]: hasUnderline }, styles$13['link'], styles$13[color], className), "data-disabled": isDisabled ? true : undefined, onClick: onClick, ...props, children: children }));
|
|
1197
1197
|
}
|
|
1198
1198
|
|
|
1199
1199
|
function RouteLink({ children, ...props }) {
|
|
@@ -1286,24 +1286,24 @@ function SolidHomeIcon(props) {
|
|
|
1286
1286
|
return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", ...props, fill: "currentColor", height: "24", viewBox: "0 0 24 24", width: "24", children: jsx("path", { d: "M15.039782,22 C14.6690193,22 14.3684378,21.6994185 14.3684378,21.3286559 L14.3684378,15.6029043 L9.34495251,15.6029043 L9.34495251,21.3286559 C9.34495251,21.6994185 9.04437101,22 8.67345678,22 L3.67134415,22 C3.3005815,22 3,21.6994185 3,21.3286559 L3,9.79560307 C3,9.60127857 3.08412644,9.41665514 3.23055192,9.28917706 L11.4158271,2.16495603 C11.6686612,1.94501466 12.0447291,1.94501466 12.2975632,2.16495603 L20.4828384,9.28917706 C20.6292639,9.41665514 20.7133903,9.60127857 20.7133903,9.79560307 L20.7133903,21.3286559 C20.7133903,21.6994185 20.4128088,22 20.0418946,22 L15.039782,22 Z", fillRule: "evenodd" }) }));
|
|
1287
1287
|
}
|
|
1288
1288
|
|
|
1289
|
-
var styles$
|
|
1289
|
+
var styles$12 = {"breadcrumbs":"breadcrumb-module-CQGse","breadcrumb":"breadcrumb-module-hxhDY","link":"breadcrumb-module-fp2Q6","icon":"breadcrumb-module-uIn3w","previous-icon":"breadcrumb-module-K-wMJ"};
|
|
1290
1290
|
|
|
1291
1291
|
function BreadcrumbShort({ links }) {
|
|
1292
1292
|
const homeLink = links[0];
|
|
1293
1293
|
const previousLink = links[links.length - 2];
|
|
1294
1294
|
const isHomeLink = previousLink === undefined || previousLink === homeLink;
|
|
1295
1295
|
const href = previousLink?.href || homeLink?.href;
|
|
1296
|
-
return (jsx(Breadcrumbs, { className: styles$
|
|
1296
|
+
return (jsx(Breadcrumbs, { className: styles$12.breadcrumbs, children: jsx(Breadcrumb$1, { className: styles$12.breadcrumb, children: jsxs(RouteLink, { className: styles$12.link, href: href, isDisabled: false, children: [jsx(GlyphsChevronsSlimLeftIcon, { className: styles$12.icon }), isHomeLink ? (jsx(SolidHomeIcon, { className: styles$12.icon })) : (jsx("span", { children: previousLink.label }))] }) }) }));
|
|
1297
1297
|
}
|
|
1298
1298
|
function BreadcrumbLongItem({ index, isDisabled, link, }) {
|
|
1299
|
-
return (jsx(Breadcrumb$1, { className: styles$
|
|
1299
|
+
return (jsx(Breadcrumb$1, { className: styles$12.breadcrumb, children: jsxs(RouteLink, { className: styles$12.link, color: "secondary", href: link.href, isDisabled: isDisabled, children: [jsx(GlyphsChevronsSlimLeftIcon, { className: clsx(styles$12['previous-icon'], styles$12.icon) }), link.label] }) }, index));
|
|
1300
1300
|
}
|
|
1301
1301
|
function BreadcrumbLong({ links }) {
|
|
1302
1302
|
const linksWithoutFirst = links.slice(1);
|
|
1303
1303
|
const homeLink = links[0];
|
|
1304
1304
|
if (!homeLink)
|
|
1305
1305
|
return null;
|
|
1306
|
-
return (jsxs(Breadcrumbs, { className: styles$
|
|
1306
|
+
return (jsxs(Breadcrumbs, { className: styles$12.breadcrumbs, children: [jsx(Breadcrumb$1, { className: styles$12.breadcrumb, children: jsx(RouteLink, { className: styles$12.link, href: homeLink.href, children: jsx(SolidHomeIcon, { className: clsx(styles$12['home-icon'], styles$12.icon) }) }) }), linksWithoutFirst.map((link, index) => (jsx(BreadcrumbLongItem, { index: index, isDisabled: linksWithoutFirst.length - 1 === index, link: link }, index)))] }));
|
|
1307
1307
|
}
|
|
1308
1308
|
function Breadcrumb({ links }) {
|
|
1309
1309
|
const { lg } = useBreakpoint();
|
|
@@ -1312,10 +1312,10 @@ function Breadcrumb({ links }) {
|
|
|
1312
1312
|
return lg ? BreadcrumbLong({ links }) : BreadcrumbShort({ links });
|
|
1313
1313
|
}
|
|
1314
1314
|
|
|
1315
|
-
var styles
|
|
1315
|
+
var styles$11 = {"icon-button":"icon-button-module-4PDK-","md":"icon-button-module-k3s9J","lg":"icon-button-module-agk6Y","primary":"icon-button-module-fTeP4","secondary":"icon-button-module-dM0eo","current-color":"icon-button-module-71HRy"};
|
|
1316
1316
|
|
|
1317
1317
|
function IconButton({ children, className, color = 'primary', isDisabled, onClick, size = 'md', type = 'button', }) {
|
|
1318
|
-
return (jsx("button", { className: clsx(styles
|
|
1318
|
+
return (jsx("button", { className: clsx(styles$11['icon-button'], styles$11[size], styles$11[color], className), "data-disabled": isDisabled ? true : undefined, disabled: isDisabled, onClick: e => {
|
|
1319
1319
|
onClick?.(e);
|
|
1320
1320
|
e.preventDefault();
|
|
1321
1321
|
e.stopPropagation();
|
|
@@ -1330,21 +1330,21 @@ function StrokeFavoriteIcon(props) {
|
|
|
1330
1330
|
return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", ...props, fill: "currentColor", height: "24", viewBox: "0 0 24 24", width: "24", children: jsx("path", { d: "M7.33319295,3.33090958 C5.12714802,3.33090958 3.33232058,5.12348359 3.33232058,7.32679321 C3.33232058,8.18447047 3.64878056,9.03643889 4.29989998,9.93107334 L11.9997744,20.2227497 L19.7053643,9.92401241 C20.351069,9.03643889 20.6673786,8.1846207 20.6673786,7.32679321 C20.6673786,5.12348359 18.8727016,3.33090958 16.6666566,3.33090958 C14.8537801,3.33090958 13.1222748,4.56251549 12.6388611,6.19569283 C12.5552338,6.47843037 12.2951771,6.67253074 11.9999248,6.67253074 C11.7046724,6.67253074 11.4447662,6.47843037 11.3609885,6.19569283 C10.8775748,4.56251549 9.14606944,3.33090958 7.33319295,3.33090958 M11.9997744,22 L11.9997744,22 C11.7898038,22 11.5918659,21.9008466 11.4662746,21.7327364 L3.22718487,10.720545 C2.41106707,9.59905954 2,8.45954615 2,7.32679321 C2,4.3895979 4.39240135,2 7.33319295,2 C9.22488362,2 11.0018124,2.98206975 11.9999248,4.46786903 C12.9978868,2.98206975 14.774966,2 16.6666566,2 C19.6072978,2 22,4.3895979 22,7.32679321 C22,8.45969638 21.5887825,9.59920978 20.777929,10.7136343 L12.5334246,21.7327364 C12.4076829,21.9008466 12.2098954,22 11.9997744,22", fillRule: "evenodd" }) }));
|
|
1331
1331
|
}
|
|
1332
1332
|
|
|
1333
|
-
var styles$
|
|
1333
|
+
var styles$10 = {"favorite-button":"favorite-button-module-tXSS3","is-favorite":"favorite-button-module-l557q","favorite-on":"favorite-button-module-6Tsmy","favorite-off":"favorite-button-module-LQauU"};
|
|
1334
1334
|
|
|
1335
1335
|
function FavoriteButton({ isDisabled, isFavorite, onPress, }) {
|
|
1336
|
-
return (jsx(IconButton, { className: clsx(styles$
|
|
1337
|
-
[styles$
|
|
1336
|
+
return (jsx(IconButton, { className: clsx(styles$10['favorite-button'], {
|
|
1337
|
+
[styles$10['is-favorite']]: isFavorite,
|
|
1338
1338
|
}), color: "secondary", isDisabled: isDisabled, onClick: onPress, children: isFavorite ? jsx(SolidFavoriteIcon, {}) : jsx(StrokeFavoriteIcon, {}) }));
|
|
1339
1339
|
}
|
|
1340
1340
|
|
|
1341
|
-
var styles
|
|
1341
|
+
var styles$$ = {"field-error":"field-error-module-FXnIg"};
|
|
1342
1342
|
|
|
1343
1343
|
function FieldError({ children }) {
|
|
1344
|
-
return (jsx(FieldError$1, { className: styles
|
|
1344
|
+
return (jsx(FieldError$1, { className: styles$$['field-error'], children: children }));
|
|
1345
1345
|
}
|
|
1346
1346
|
|
|
1347
|
-
var styles$
|
|
1347
|
+
var styles$_ = {"input-container":"input-module-2woJR","shadow-input":"input-module-pNKEt","lg":"input-module-Dx2qC","md":"input-module-sH6e7","focus":"input-module-hEEuy","growing-input":"input-module-6HwY4"};
|
|
1348
1348
|
|
|
1349
1349
|
/**
|
|
1350
1350
|
* This component is used to create an input that grows as the user types.
|
|
@@ -1360,20 +1360,20 @@ const Input = forwardRef(({ _pseudo = 'none', autoGrow, size = 'lg', ...inputPro
|
|
|
1360
1360
|
? onChange?.(event)
|
|
1361
1361
|
: setUncontrolledValue(event.target.value);
|
|
1362
1362
|
const { pressProps } = usePress({});
|
|
1363
|
-
return (jsx("div", { className: clsx(styles$
|
|
1363
|
+
return (jsx("div", { className: clsx(styles$_['input-container'], styles$_[size], styles$_[_pseudo]), children: jsxs("div", { className: clsx({ [styles$_['growing-input']]: autoGrow }), children: [jsx(Input$1, { size: autoGrow ? 1 : undefined, ...props, ...pressProps, ref: ref, onChange: handleChange, onClick: e => {
|
|
1364
1364
|
e.preventDefault();
|
|
1365
1365
|
e.stopPropagation();
|
|
1366
1366
|
e.target.focus();
|
|
1367
|
-
} }), autoGrow && jsx("span", { className: styles$
|
|
1367
|
+
} }), autoGrow && jsx("span", { className: styles$_['shadow-input'], children: value })] }) }));
|
|
1368
1368
|
});
|
|
1369
1369
|
Input.displayName = 'Input';
|
|
1370
1370
|
|
|
1371
|
-
var styles$
|
|
1371
|
+
var styles$Z = {"label":"label-module-LGfJt","required":"label-module-oTWaS"};
|
|
1372
1372
|
|
|
1373
1373
|
function Label({ children, isRequired }) {
|
|
1374
1374
|
if (!children)
|
|
1375
1375
|
return null;
|
|
1376
|
-
return (jsxs(Label$1, { className: styles$
|
|
1376
|
+
return (jsxs(Label$1, { className: styles$Z.label, children: [children, isRequired && jsx("span", { className: styles$Z.required, children: "*" })] }));
|
|
1377
1377
|
}
|
|
1378
1378
|
|
|
1379
1379
|
function StrokeCollapseIcon(props) {
|
|
@@ -1388,7 +1388,7 @@ function StrokeTrashIcon(props) {
|
|
|
1388
1388
|
return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", ...props, fill: "currentColor", height: "24", viewBox: "0 0 24 24", width: "24", children: jsx("path", { d: "M7.77273912,6.04398453 L9.07201126,6.04398453 L9.07201126,4.11757519 C9.07201126,3.84748949 9.15880324,3.63104347 9.33238719,3.46823712 C9.50597114,3.30543077 9.73570292,3.22402759 10.0215825,3.22402759 L13.3263825,3.22402759 C13.6186194,3.22402759 13.850313,3.30543077 14.0214633,3.46823712 C14.1926136,3.63104347 14.2781888,3.84748949 14.2781888,4.11757519 L14.2781888,6.04398453 L15.5846129,6.04398453 L15.5846129,4.04352264 C15.5846129,3.40769382 15.3900697,2.90814951 15.0009834,2.5448897 C14.6118971,2.1816299 14.0799703,2 13.405203,2 L9.942762,2 C9.26869007,2 8.73850162,2.1816299 8.35219662,2.5448897 C7.96589162,2.90814951 7.77273912,3.40769382 7.77273912,4.04352264 L7.77273912,6.04398453 Z M3.60955531,6.6940676 L19.7561406,6.6940676 C19.9248076,6.6940676 20.0683931,6.6332263 20.186897,6.51154371 C20.305401,6.38986111 20.3646529,6.242352 20.3646529,6.06901638 C20.3646529,5.9003494 20.3052023,5.75537328 20.186301,5.63408801 C20.0673997,5.51280275 19.9240129,5.45216011 19.7561406,5.45216011 L3.60955531,5.45216011 C3.44734496,5.45216011 3.30519982,5.51300141 3.18311989,5.63468401 C3.06103996,5.75636661 3,5.90114406 3,6.06901638 C3,6.24314666 3.06103996,6.39085444 3.18311989,6.5121397 C3.30519982,6.63342497 3.44734496,6.6940676 3.60955531,6.6940676 Z M7.56920636,22 L15.8049825,22 C16.4210441,22 16.9252074,21.8108208 17.3174724,21.4324624 C17.7097373,21.0541041 17.9209684,20.5545101 17.9511655,19.9336805 L18.6066126,6.5283806 L17.2870766,6.5283806 L16.6578534,19.8059883 C16.6444435,20.0808419 16.5455825,20.3084381 16.3612707,20.4887766 C16.1769588,20.6691152 15.9469787,20.7592845 15.6713303,20.7592845 L7.68497866,20.7592845 C7.41479362,20.7592845 7.18757,20.6677246 7.00330778,20.4846047 C6.81904556,20.3014848 6.72015983,20.0752793 6.70665057,19.8059883 L6.05358753,6.5295726 L4.76996029,6.5295726 L5.41587138,19.9420245 C5.4468632,20.562854 5.65806942,21.0610573 6.04949005,21.4366344 C6.44091068,21.8122115 6.94748278,22 7.56920636,22 Z M9.00213069,19.1375783 C9.15957307,19.1375783 9.2862223,19.0920591 9.38207839,19.0010206 C9.47793448,18.9099822 9.5230812,18.7917017 9.51751857,18.6461793 L9.2314403,8.86811345 C9.22587767,8.72338566 9.17618647,8.60729053 9.0823667,8.51982806 C8.98854694,8.43236558 8.86649184,8.38863435 8.71620142,8.38863435 C8.55945437,8.38863435 8.43436962,8.43395491 8.34094719,8.52459603 C8.24752475,8.61523714 8.20081354,8.73371626 8.20081354,8.88003338 L8.48555081,18.6485633 C8.49121278,18.7988537 8.54055631,18.9179288 8.63358142,19.0057886 C8.72660652,19.0936484 8.84945628,19.1375783 9.00213069,19.1375783 Z M11.6876904,19.1375783 C11.8451328,19.1375783 11.9717821,19.0922578 12.0676381,19.0016166 C12.1634942,18.9109755 12.2114223,18.7924964 12.2114223,18.6461793 L12.2114223,8.88003338 C12.2114223,8.73451092 12.1634942,8.61623047 12.0676381,8.52519202 C11.9717821,8.43415357 11.8451328,8.38863435 11.6876904,8.38863435 C11.5310427,8.38863435 11.4032015,8.43415357 11.3041668,8.52519202 C11.205132,8.61623047 11.1556147,8.73451092 11.1556147,8.88003338 L11.1556147,18.6461793 C11.1556147,18.7924964 11.205132,18.9109755 11.3041668,19.0016166 C11.4032015,19.0922578 11.5310427,19.1375783 11.6876904,19.1375783 Z M14.3635653,19.1387703 C14.516339,19.1387703 14.6392384,19.0948404 14.7322635,19.0069806 C14.8252886,18.9191208 14.8745825,18.802827 14.8801451,18.6580992 L15.1662234,8.88122537 C15.1662234,8.73490825 15.1194873,8.6166278 15.0260152,8.52638402 C14.9325431,8.43614023 14.8070859,8.39101833 14.6496435,8.39101833 C14.4993531,8.39101833 14.3772732,8.4345509 14.2834037,8.52161604 C14.1895343,8.60868118 14.1398183,8.7277563 14.1342556,8.87884138 L13.8483264,18.6485633 C13.8483264,18.7932911 13.8948389,18.9111742 13.987864,19.0022126 C14.0808891,19.0932511 14.2061229,19.1387703 14.3635653,19.1387703 Z" }) }));
|
|
1389
1389
|
}
|
|
1390
1390
|
|
|
1391
|
-
var styles$
|
|
1391
|
+
var styles$Y = {"field":"number-field-module-gmnog","button-input-container":"number-field-module-8Lvgh","zoom-in-text":"number-field-module-OlEoa"};
|
|
1392
1392
|
|
|
1393
1393
|
/**
|
|
1394
1394
|
* This component is used to create a number field.
|
|
@@ -1396,7 +1396,7 @@ var styles$W = {"field":"number-field-module-gmnog","button-input-container":"nu
|
|
|
1396
1396
|
*/
|
|
1397
1397
|
function NumberField({ autoFocus, autoGrow, defaultValue, formatOptions = { style: 'decimal', useGrouping: false }, isDisabled, isInvalid, isReadOnly, isRequired, label, maxLength, maxValue, minValue, name, onChange, onInput, onKeyUp, placeholder, showLabel = false, size = 'lg', value, withButtons, }) {
|
|
1398
1398
|
const inputRef = useRef(null);
|
|
1399
|
-
return (jsxs(NumberField$1, { "aria-label": label, autoFocus: autoFocus, className: clsx(styles$
|
|
1399
|
+
return (jsxs(NumberField$1, { "aria-label": label, autoFocus: autoFocus, className: clsx(styles$Y.field, styles$Y[size]), defaultValue: defaultValue, formatOptions: formatOptions, isDisabled: isDisabled, isInvalid: isInvalid, isReadOnly: isReadOnly, isRequired: isRequired, maxValue: maxValue, minValue: minValue, name: name, onChange: onChange, onInput: onInput, value: value, children: [showLabel && jsx(Label, { isRequired: isRequired, children: label }), jsxs("div", { className: styles$Y['button-input-container'], children: [withButtons && (jsx(Button$1, { isDisabled: isDisabled,
|
|
1400
1400
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
1401
1401
|
// @ts-expect-error
|
|
1402
1402
|
onClick: e => e.preventDefault(), onPressStart: e => e.target.focus(), slot: "decrement", children: (value || 0) <= 1 ? jsx(StrokeTrashIcon, {}) : jsx(StrokeCollapseIcon, {}) })), jsx(Input, { ref: inputRef, autoGrow: autoGrow, maxLength: maxLength, onFocus: e => (e.target.selectionStart = e.target.value.length || 0), onKeyUp: e => onKeyUp?.(e), placeholder: placeholder, size: size }), withButtons && (jsx(Button$1, { isDisabled: isDisabled,
|
|
@@ -1409,7 +1409,7 @@ function SolidCartIcon(props) {
|
|
|
1409
1409
|
return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", ...props, fill: "currentColor", height: "24", viewBox: "0 0 24 24", width: "24", children: jsx("path", { d: "M7.89619008,16.6656848 C9.33405626,16.6656848 10.4996925,17.831321 10.4996925,19.2690253 C10.4996925,20.7068915 9.33405626,21.8725278 7.89619008,21.8725278 C6.45832389,21.8725278 5.29268766,20.7068915 5.29268766,19.2690253 C5.29268766,17.831321 6.45832389,16.6656848 7.89619008,16.6656848 Z M16.8207199,16.6656848 C18.2585861,16.6656848 19.4242223,17.831321 19.4242223,19.2690253 C19.4242223,20.7068915 18.2585861,21.8725278 16.8207199,21.8725278 C15.3828537,21.8725278 14.2172175,20.7068915 14.2172175,19.2690253 C14.2172175,17.831321 15.3828537,16.6656848 16.8207199,16.6656848 Z M7.89619008,18.0995047 C7.25122196,18.0995047 6.72650762,18.6242191 6.72650762,19.2690253 C6.72650762,19.9139935 7.25122196,20.4387078 7.89619008,20.4387078 C8.54115819,20.4387078 9.06587253,19.9139935 9.06587253,19.2690253 C9.06587253,18.6242191 8.54115819,18.0995047 7.89619008,18.0995047 Z M16.8207199,18.0995047 C16.1757518,18.0995047 15.6510375,18.6242191 15.6510375,19.2690253 C15.6510375,19.9139935 16.1757518,20.4387078 16.8207199,20.4387078 C17.465688,20.4387078 17.9904024,19.9139935 17.9904024,19.2690253 C17.9904024,18.6242191 17.465688,18.0995047 16.8207199,18.0995047 Z M4.58909785,3 C4.6054446,3 4.6206584,3.00372253 4.63668145,3.00485547 C4.65869291,3.00631211 4.68038067,3.0079306 4.70174473,3.01132943 C4.72958275,3.0158612 4.75628783,3.02233516 4.78299291,3.02994206 C4.8001489,3.03479753 4.81698119,3.03949115 4.83365164,3.04564141 C4.8622989,3.05616159 4.88948953,3.06862396 4.91619461,3.08254297 L4.956495,3.10439258 C4.98287638,3.12025378 5.00763927,3.13789532 5.03175477,3.15699349 L5.06736154,3.18645 C5.08921115,3.20603373 5.10911857,3.22707409 5.1283786,3.2492474 C5.13986987,3.26251902 5.1511993,3.27562878 5.16171948,3.28970964 C5.17806623,3.31155925 5.19230894,3.33421811 5.2060661,3.35768621 C5.21626258,3.37500405 5.22597352,3.39216004 5.23455152,3.41028712 C5.24555725,3.43326967 5.25462079,3.45706147 5.26319878,3.48150066 C5.27032014,3.50205548 5.27711779,3.52244845 5.28245881,3.54381251 C5.28860907,3.56825171 5.29249345,3.59317645 5.29605412,3.61858673 C5.29799631,3.63299129 5.30252808,3.64642476 5.30382287,3.66115301 L5.510504,6.30738355 L21.2869744,6.30772748 C21.3139222,6.30835464 21.3370666,6.31256272 21.3603729,6.3151523 C21.3861069,6.31790373 21.4120027,6.31936037 21.4369275,6.32486324 C21.4591008,6.32923316 21.4726961,6.33603082 21.4875862,6.34056259 C21.5163953,6.34914058 21.5452044,6.35723303 21.5722332,6.36920985 C21.5918169,6.37778785 21.6092966,6.38911728 21.6275855,6.39931376 C21.6497588,6.41145243 21.6722559,6.42278186 21.6928107,6.43718642 C21.711747,6.45029618 21.7280937,6.46583368 21.7455734,6.48072379 C21.763215,6.49577574 21.7815039,6.51001845 21.7976888,6.52668889 C21.8132263,6.54287379 21.8261742,6.56067718 21.8400932,6.57815686 C21.8551452,6.59676949 21.8706827,6.61473473 21.8836306,6.634804 C21.8954456,6.65293108 21.9043473,6.67251481 21.9145437,6.69161299 C21.9258732,6.71330075 21.9381737,6.73434111 21.9473991,6.75716182 C21.9559771,6.77868773 21.9614799,6.80134658 21.9679539,6.82368174 C21.9744279,6.8456932 21.9820348,6.86705726 21.9864047,6.89003981 C21.9915839,6.91658304 21.9925549,6.94393552 21.994659,6.97128799 C21.9959538,6.98909138 22,7.00608552 22,7.0242126 C21.9988671,7.05496391 21.994659,7.07794646 21.9922312,7.10109086 C21.9894798,7.1269867 21.9880232,7.15320623 21.9825203,7.17813097 L20.5915903,13.2322533 L20.587706,13.2487619 C20.5797754,13.2835594 20.5681222,13.3164147 20.555498,13.3486227 C20.5524229,13.3567151 20.5499951,13.3651313 20.5465963,13.3730619 C20.5299259,13.4117438 20.5096948,13.4483216 20.4870359,13.4827955 C20.4797527,13.4938012 20.4710129,13.5031884 20.4632441,13.5137086 C20.445117,13.5381478 20.4265044,13.5619396 20.4056259,13.5836274 C20.3944583,13.5952805 20.3823196,13.605477 20.3705046,13.6163208 C20.3505972,13.6344479 20.3302043,13.6517658 20.3083546,13.6674651 C20.2941119,13.6778235 20.2795455,13.6872107 20.2646554,13.6964361 C20.2424821,13.7101932 20.2198233,13.7223319 20.1963552,13.7334995 L20.148286,13.7550254 C20.1214191,13.7655456 20.0935811,13.7734762 20.0654194,13.7807594 C20.0513385,13.7843201 20.037905,13.7888518 20.0235005,13.7916033 C19.9798012,13.8000194 19.9351309,13.8053604 19.8898132,13.8053604 L6.09623539,13.8051986 L6.20774933,15.2317353 L19.411064,15.2317353 C19.8069466,15.2317353 20.1278931,15.5528437 20.1278931,15.9487262 C20.1278931,16.3446088 19.8069466,16.6657172 19.411064,16.6657172 L5.54384488,16.6657172 C5.49593759,16.6657172 5.44932509,16.660538 5.40384553,16.6514744 C5.38863173,16.6483993 5.37471272,16.6425728 5.35998446,16.6386884 C5.33052795,16.6307578 5.30090959,16.6231509 5.27290972,16.6116596 C5.25543003,16.6043764 5.23940699,16.5945036 5.22257469,16.5859256 C5.19910659,16.5741106 5.17547665,16.5627812 5.15362704,16.5485385 C5.13711844,16.5376946 5.12255203,16.5249086 5.10701453,16.5127699 C5.08694526,16.4972324 5.06687599,16.4821804 5.04874891,16.4647007 C5.03434435,16.4509436 5.02204383,16.4357298 5.00893406,16.4208397 C4.99226362,16.4019033 4.97575503,16.3834526 4.96118862,16.3628977 C4.94937364,16.3463891 4.93966271,16.3285858 4.92930437,16.3111061 C4.91668015,16.2899039 4.90437963,16.2688635 4.8940213,16.2462046 C4.88511961,16.2267828 4.87832195,16.2065516 4.87103875,16.1861587 C4.86310815,16.163338 4.8553394,16.1406791 4.84967468,16.1168873 C4.84433367,16.0950377 4.84109669,16.0728644 4.83785971,16.0502055 L4.82992911,16.0045641 L3.92600265,4.43381996 L2.7169909,4.43381996 C2.32110834,4.43381996 2,4.11287347 2,3.7169909 C2,3.32094649 2.32110834,3 2.7169909,3 Z", fillRule: "evenodd" }) }));
|
|
1410
1410
|
}
|
|
1411
1411
|
|
|
1412
|
-
var styles$
|
|
1412
|
+
var styles$X = {"manual-input-container":"add-to-cart-button-module-AWFvQ","left-button-spacer":"add-to-cart-button-module-SS7WM"};
|
|
1413
1413
|
|
|
1414
1414
|
function AddToCartButton({ initialState = 'initial', isDisabled = false, onChange, quantity, }) {
|
|
1415
1415
|
const [currentState, setState] = useState(initialState);
|
|
@@ -1501,7 +1501,7 @@ function ManualInputState({ isDisabled, onCancel, onConfirm, quantity, }) {
|
|
|
1501
1501
|
e.key === 'Enter' && onConfirm(ensureNumber(updatedQuantity));
|
|
1502
1502
|
e.key === 'Escape' && onCancel();
|
|
1503
1503
|
};
|
|
1504
|
-
return (jsxs("div", { className: styles$
|
|
1504
|
+
return (jsxs("div", { className: styles$X['manual-input-container'], children: [jsx("div", { className: styles$X['left-button-spacer'] }), jsx(NumberField, { autoFocus: true, autoGrow: true, defaultValue: quantity ? ensureNumber(quantity) : undefined, formatOptions: {
|
|
1505
1505
|
maximumFractionDigits: 0,
|
|
1506
1506
|
style: 'decimal',
|
|
1507
1507
|
useGrouping: false,
|
|
@@ -1555,12 +1555,12 @@ const ConnectedAddToCartButton = ({ onAddToCart, productId }) => {
|
|
|
1555
1555
|
return (jsx(AddToCartButton, { isDisabled: isPendingDeleteCartLine || isLoadingCartLines || isPendingAddToCart, onChange: handleChange, quantity: quantity }));
|
|
1556
1556
|
};
|
|
1557
1557
|
|
|
1558
|
-
var styles$
|
|
1558
|
+
var styles$W = {"tag":"tag-module-B7r15","body":"tag-module-4cfCf","shape":"tag-module-c7CRb"};
|
|
1559
1559
|
|
|
1560
1560
|
function Tag({ children }) {
|
|
1561
1561
|
if (!children)
|
|
1562
1562
|
return null;
|
|
1563
|
-
return (jsxs("div", { className: styles$
|
|
1563
|
+
return (jsxs("div", { className: styles$W.tag, children: [jsx("div", { className: styles$W.body, children: children }), jsx("svg", { className: styles$W.shape, height: "16", viewBox: "0 0 9 16", width: "9", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M1.92461763,0 L0,0 L0,16 L1.92461763,16 L6.4117887,16 L8.87489381,7.57121588 C9.23711515,6.3325062 8.79482383,4.99454094 7.78060408,4.2560794 L1.92461763,0 Z", fill: "currentColor" }) })] }));
|
|
1564
1564
|
}
|
|
1565
1565
|
|
|
1566
1566
|
const IntlContext = createContext({
|
|
@@ -1596,7 +1596,7 @@ function useFormattedMessage() {
|
|
|
1596
1596
|
|
|
1597
1597
|
const FormattedMessage = ({ fallbackValue, id, optional, replacementValues, }) => useFormattedMessage()(id, { fallbackValue, optional, replacementValues });
|
|
1598
1598
|
|
|
1599
|
-
var styles$
|
|
1599
|
+
var styles$V = {"product-price":"product-price-module-oIU1K","original-price":"product-price-module-til0s","is-hidden":"product-price-module-V1NCf","current-price-wrapper":"product-price-module-FfVhl","current-price":"product-price-module-pvy2w","wholes":"product-price-module-GCw07","dot":"product-price-module-N56iV","decimals":"product-price-module-eWOOF","vat":"product-price-module-96DoG"};
|
|
1600
1600
|
|
|
1601
1601
|
const formatPrice = (price) => new Intl.NumberFormat('en-US', {
|
|
1602
1602
|
maximumFractionDigits: 2,
|
|
@@ -1609,22 +1609,22 @@ function ProductPrice({ className, isVatIncluded, originalPrice, price, }) {
|
|
|
1609
1609
|
const priceWithCurrency = formatPrice(price);
|
|
1610
1610
|
const [wholes, decimals] = priceWithCurrency.split('.');
|
|
1611
1611
|
const showOriginalPrice = priceWithCurrency !== originalPriceWithCurrency;
|
|
1612
|
-
return (jsxs("div", { className: clsx(className, styles$
|
|
1613
|
-
[styles$
|
|
1614
|
-
}), children: originalPriceWithCurrency }), jsxs("div", { className: styles$
|
|
1612
|
+
return (jsxs("div", { className: clsx(className, styles$V['product-price']), children: [jsx("span", { className: clsx(styles$V['original-price'], {
|
|
1613
|
+
[styles$V['is-hidden']]: !showOriginalPrice,
|
|
1614
|
+
}), children: originalPriceWithCurrency }), jsxs("div", { className: styles$V['current-price-wrapper'], children: [jsxs("div", { className: styles$V['current-price'], children: [jsx("span", { className: styles$V.wholes, children: wholes }), jsx("span", { className: styles$V.dot, children: "." }), jsx("span", { className: styles$V.decimals, children: decimals })] }), jsx("span", { className: styles$V.vat, children: isVatIncluded ? (jsx(FormattedMessage, { id: "Incl. VAT" })) : (jsx(FormattedMessage, { id: "Excl. VAT" })) })] })] }));
|
|
1615
1615
|
}
|
|
1616
1616
|
|
|
1617
|
-
var styles$
|
|
1617
|
+
var styles$U = {"product-sku":"product-sku-module-ITb8x"};
|
|
1618
1618
|
|
|
1619
1619
|
function ProductSku({ sku }) {
|
|
1620
|
-
return (jsx("p", { className: styles$
|
|
1620
|
+
return (jsx("p", { className: styles$U['product-sku'], "data-test-selector": "productNumber", children: sku }));
|
|
1621
1621
|
}
|
|
1622
1622
|
|
|
1623
1623
|
function isResponsiveImage(image) {
|
|
1624
1624
|
return Boolean(image?.lg);
|
|
1625
1625
|
}
|
|
1626
1626
|
|
|
1627
|
-
var styles$
|
|
1627
|
+
var styles$T = {"image":"image-module-lg7Kj","contain":"image-module-KFEgG","cover":"image-module-tVKFe","has-error":"image-module-LM93B","picture":"image-module-pNYjR"};
|
|
1628
1628
|
|
|
1629
1629
|
function Image({ className, fallbackSrc = 'https://res.cloudinary.com/dkz9eknwh/image/upload/v1716545808/images/product-card/fallback_p6ngjz.svg', fit = 'cover', height, image, loading = 'eager', title, width, }) {
|
|
1630
1630
|
const [hasError, setHasError] = useState(false);
|
|
@@ -1648,26 +1648,26 @@ function Image({ className, fallbackSrc = 'https://res.cloudinary.com/dkz9eknwh/
|
|
|
1648
1648
|
}
|
|
1649
1649
|
function ImageComponent({ className, fallbackSrc, fit = 'cover', hasError, image, ...rest }) {
|
|
1650
1650
|
if (!image)
|
|
1651
|
-
return (jsx("img", { className: clsx(styles$
|
|
1651
|
+
return (jsx("img", { className: clsx(styles$T.image, className, styles$T[fit], styles$T['has-error']), src: fallbackSrc, ...rest }));
|
|
1652
1652
|
const srcSet = !hasError
|
|
1653
1653
|
? `${image[1]} 1x, ${image[2]} 2x, ${image[3]} 3x`
|
|
1654
1654
|
: undefined;
|
|
1655
|
-
return (jsx("img", { alt: image.altText, className: clsx(styles$
|
|
1656
|
-
[styles$
|
|
1655
|
+
return (jsx("img", { alt: image.altText, className: clsx(styles$T.image, className, styles$T[fit], {
|
|
1656
|
+
[styles$T['has-error']]: hasError,
|
|
1657
1657
|
}), src: !hasError ? image[3] : fallbackSrc, srcSet: srcSet, ...rest }));
|
|
1658
1658
|
}
|
|
1659
1659
|
function PictureComponent({ className, fallbackSrc, fit = 'cover', hasError, image, ...rest }) {
|
|
1660
1660
|
if (!image)
|
|
1661
|
-
return (jsx("picture", { className: clsx(styles$
|
|
1662
|
-
return (jsxs("picture", { className: clsx(styles$
|
|
1663
|
-
[styles$
|
|
1661
|
+
return (jsx("picture", { className: clsx(styles$T.picture, className), children: jsx("img", { className: clsx(styles$T[fit], styles$T['has-error']), src: fallbackSrc, ...rest }) }));
|
|
1662
|
+
return (jsxs("picture", { className: clsx(styles$T.picture, className), children: [jsx("source", { media: "(max-width: 768px)", srcSet: `${image.sm[1]} 1x, ${image.sm[2]} 2x, ${image.sm[3]} 3x` }), jsx("source", { media: "(max-width: 1439px)", srcSet: `${image.md[1]} 1x, ${image.md[2]} 2x, ${image.md[3]} 3x` }), jsx("source", { media: "(min-width: 1440px)", srcSet: `${image.lg[1]} 1x, ${image.lg[2]} 2x, ${image.lg[3]} 3x` }), jsx("img", { className: clsx(styles$T[fit], {
|
|
1663
|
+
[styles$T['has-error']]: hasError,
|
|
1664
1664
|
}), src: !hasError ? image.lg[3] : fallbackSrc, ...rest })] }));
|
|
1665
1665
|
}
|
|
1666
1666
|
|
|
1667
|
-
var styles$
|
|
1667
|
+
var styles$S = {"product-card-container":"product-card-module-LepTy","product-card":"product-card-module-pLaiB","favorite-button":"product-card-module-tvEdz","content":"product-card-module-e0kMu","top":"product-card-module-Q0VvF","tag":"product-card-module-HkWBE","title":"product-card-module-CStNi","bottom":"product-card-module-kD2tU","image":"product-card-module-p-zoi","price":"product-card-module-irW0D","add-to-cart-button":"product-card-module-SnCvX"};
|
|
1668
1668
|
|
|
1669
1669
|
function ProductCard({ addToCartButton: AddToCartButton, favoriteButton: FavoriteButton, href, id, image, onClick, price, sku, tags, title, }) {
|
|
1670
|
-
return (jsx("div", { className: styles$
|
|
1670
|
+
return (jsx("div", { className: styles$S['product-card-container'], children: jsxs(RouteLink, { className: styles$S['product-card'], "data-product-id": sku, href: href, id: id, onClick: onClick, children: [jsx("div", { className: styles$S.image, children: jsx(Image, { ...image }) }), jsx("div", { className: styles$S['favorite-button'], children: FavoriteButton && FavoriteButton }), jsxs("div", { className: styles$S.content, children: [jsxs("div", { className: styles$S.top, children: [jsx("div", { className: styles$S.tag, children: tags?.map(tag => (jsx(Tag, { children: jsx(FormattedMessage, { optional: true, fallbackValue: tag, id: `tag.${tag.toLowerCase()}` }) }, tag))) }), jsx("h2", { className: styles$S.title, children: title }), jsx(ProductSku, { sku: sku })] }), jsxs("div", { className: styles$S.bottom, children: [jsx("div", { className: styles$S.price, children: jsx(ProductPrice, { isVatIncluded: price.isVatIncluded, originalPrice: price.originalPrice, price: price.price }) }), jsx("div", { className: styles$S['add-to-cart-button'], children: AddToCartButton })] })] })] }) }));
|
|
1671
1671
|
}
|
|
1672
1672
|
|
|
1673
1673
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
@@ -7446,13 +7446,13 @@ function GlyphsArrowBoldCapsLeftIcon(props) {
|
|
|
7446
7446
|
return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", ...props, fill: "currentColor", height: "11", viewBox: "0 0 11 11", width: "11", children: jsx("path", { d: "M2.31124163,11 C2.06716529,11 1.91839241,10.7730596 2.04771379,10.5980857 L6.08820761,5.13116556 C6.42092595,4.68081431 6.37243043,4.10595375 5.96732409,3.70073526 L2.70240329,0.432177991 C2.53178078,0.261409485 2.67540212,0 2.93972934,0 L5.48361239,0 C5.57518542,0 5.6619622,0.0340936243 5.72102726,0.0931942463 L8.14882304,2.52367916 C9.1607451,3.53657521 9.28198389,4.9729381 8.45036569,6.09787751 L4.91836426,10.876542 C4.86160851,10.9533653 4.7620417,11 4.65492523,11 L2.31124163,11 Z", fillRule: "evenodd", transform: "matrix(-1 0 0 1 11 0)" }) }));
|
|
7447
7447
|
}
|
|
7448
7448
|
|
|
7449
|
-
var styles$
|
|
7449
|
+
var styles$R = {"carousel-navigation-button":"carousel-navigation-button-module-a1-I4"};
|
|
7450
7450
|
|
|
7451
7451
|
const CarouselNavigationButton = forwardRef(function NavigationButton({ className, direction, onClick }, ref) {
|
|
7452
|
-
return (jsx(Button$1, { ref: ref, className: clsx(styles$
|
|
7452
|
+
return (jsx(Button$1, { ref: ref, className: clsx(styles$R['carousel-navigation-button'], className), onPress: () => (onClick ? onClick(direction) : undefined), children: direction === 'previous' ? (jsx(GlyphsArrowBoldCapsLeftIcon, {})) : (jsx(GlyphsArrowBoldCapsRightIcon, {})) }));
|
|
7453
7453
|
});
|
|
7454
7454
|
|
|
7455
|
-
var styles$
|
|
7455
|
+
var styles$Q = {"carousel":"carousel-module-ealh-","swiper":"carousel-module-IftbN","is-ready":"carousel-module-RCpfc","has-overflow":"carousel-module-tPg7k","slide":"carousel-module-bUMlb","navigation-button-next":"carousel-module-T7bTr","is-dragging":"carousel-module-34OWD","navigation-button-prev":"carousel-module-984Rr","navigation-buttons":"carousel-module-k7Z4S","navigation-button":"carousel-module-kcqEE","top":"carousel-module-nL-O8","center":"carousel-module-5SGYn"};
|
|
7456
7456
|
|
|
7457
7457
|
function generateSlidesPerViewBreakpoints(slidesPerView) {
|
|
7458
7458
|
return Object.keys(slidesPerView).reduce((result, breakpoint) => ({
|
|
@@ -7491,12 +7491,12 @@ function Carousel({ breakpoints: _breakpoints, className, hasNavigation = true,
|
|
|
7491
7491
|
}
|
|
7492
7492
|
if (slides.length === 0)
|
|
7493
7493
|
return null;
|
|
7494
|
-
return (jsxs("div", { className: clsx(styles$
|
|
7494
|
+
return (jsxs("div", { className: clsx(styles$Q.carousel, className), style: spaceBetween !== undefined
|
|
7495
7495
|
? { '--column-gap': `${spaceBetween}px` }
|
|
7496
|
-
: undefined, children: [jsx(Swiper, { breakpoints: _breakpoints, className: clsx(styles$
|
|
7497
|
-
[styles$
|
|
7498
|
-
[styles$
|
|
7499
|
-
[styles$
|
|
7496
|
+
: undefined, children: [jsx(Swiper, { breakpoints: _breakpoints, className: clsx(styles$Q.swiper, {
|
|
7497
|
+
[styles$Q['is-dragging']]: isDragging,
|
|
7498
|
+
[styles$Q['has-overflow']]: hasOverflow,
|
|
7499
|
+
[styles$Q['is-ready']]: isReady,
|
|
7500
7500
|
}), freeMode: {
|
|
7501
7501
|
enabled: false,
|
|
7502
7502
|
sticky: true,
|
|
@@ -7507,19 +7507,19 @@ function Carousel({ breakpoints: _breakpoints, className, hasNavigation = true,
|
|
|
7507
7507
|
}, onBeforeInit: swiper => (swiperRef.current = swiper), onSliderMove: () => setIsDragging(true), onSlidesUpdated: () => {
|
|
7508
7508
|
if (!isReady)
|
|
7509
7509
|
setIsReady(true);
|
|
7510
|
-
}, onTouchEnd: () => setIsDragging(false), slidesPerGroupAuto: slidesPerView === 'auto', slidesPerView: slidesPerView, spaceBetween: spaceBetween, children: slides.map((slide, index) => (jsx(SwiperSlide, { className: clsx(styles$
|
|
7510
|
+
}, onTouchEnd: () => setIsDragging(false), slidesPerGroupAuto: slidesPerView === 'auto', slidesPerView: slidesPerView, spaceBetween: spaceBetween, children: slides.map((slide, index) => (jsx(SwiperSlide, { className: clsx(styles$Q.slide, slideClasses), children: slide }, index))) }), hasNavigation && (jsxs("div", { className: clsx(styles$Q['navigation-buttons'], styles$Q[navigationButtonsPosition]), children: [jsx(CarouselNavigationButton, { ref: prevEl, className: clsx(styles$Q['navigation-button'], styles$Q['navigation-button-prev']), direction: "previous", onClick: direction => handleNavigationButtonClick(direction) }), jsx(CarouselNavigationButton, { ref: nextEl, className: clsx(styles$Q['navigation-button'], styles$Q['navigation-button-next']), direction: "next", onClick: direction => handleNavigationButtonClick(direction) })] }))] }));
|
|
7511
7511
|
}
|
|
7512
7512
|
|
|
7513
|
-
var styles$
|
|
7513
|
+
var styles$P = {"slide":"category-carousel-module-muLq-"};
|
|
7514
7514
|
|
|
7515
7515
|
function CategoryCarousel({ categoryCards }) {
|
|
7516
|
-
return jsx(Carousel, { slideClasses: styles$
|
|
7516
|
+
return jsx(Carousel, { slideClasses: styles$P.slide, slides: categoryCards });
|
|
7517
7517
|
}
|
|
7518
7518
|
|
|
7519
|
-
var styles$
|
|
7519
|
+
var styles$O = {"accordion":"accordion-module-9WvAH","indented":"accordion-module-6CcEH","white":"accordion-module-CaVdG","accordion-item":"accordion-module-lf9d-","lg":"accordion-module-0qnae","with-seperators":"accordion-module-yOLrW","button":"accordion-module--Rwpb","icon":"accordion-module-Y50uq","focus":"accordion-module-M4BZs","panel":"accordion-module-KZjMo","content":"accordion-module-ejMH3","border-type-bottom":"accordion-module-oTdZK","border-type-top":"accordion-module-0mrLq","border-type-middle":"accordion-module-aAr-R","is-open":"accordion-module-W0F1z","border-type-middle-accentuated":"accordion-module-OB98a"};
|
|
7520
7520
|
|
|
7521
7521
|
function Accordion({ borderType = 'bottom', children, color = 'black', hasLineSeparator = true, indented, size = 'md', }) {
|
|
7522
|
-
return (jsx("div", { className: clsx({ [styles$
|
|
7522
|
+
return (jsx("div", { className: clsx({ [styles$O.indented]: indented }, styles$O.accordion, styles$O[color], styles$O[size], hasLineSeparator && styles$O['with-seperators']), children: Boolean(children) &&
|
|
7523
7523
|
Children.map(children, child => {
|
|
7524
7524
|
if (!child)
|
|
7525
7525
|
return null;
|
|
@@ -7556,7 +7556,7 @@ function useResizeObserver(resizeCallback) {
|
|
|
7556
7556
|
};
|
|
7557
7557
|
}
|
|
7558
7558
|
|
|
7559
|
-
var styles$
|
|
7559
|
+
var styles$N = {"show-all":"show-all-module-BDp21","panel":"show-all-module-bEdda","content":"show-all-module-RF--F","has-transparency":"show-all-module-30y7l","button":"show-all-module-58e7Q","icon":"show-all-module-fqncI","is-open":"show-all-module-hQeGI","content-fits":"show-all-module-OhPfm"};
|
|
7560
7560
|
|
|
7561
7561
|
function ShowAll({ children, hasTransparency = true, initialHeight = 0, initialIsOpen = false, isOpen: isControlledOpen, onToggle, }) {
|
|
7562
7562
|
const isControlled = isControlledOpen !== undefined && onToggle !== undefined;
|
|
@@ -7567,19 +7567,19 @@ function ShowAll({ children, hasTransparency = true, initialHeight = 0, initialI
|
|
|
7567
7567
|
const { ref } = useResizeObserver((_target, size) => {
|
|
7568
7568
|
setContentFits((size.height || 0) <= initialHeight);
|
|
7569
7569
|
});
|
|
7570
|
-
return (jsxs("div", { ref: showAllRef, className: clsx(styles$
|
|
7571
|
-
[styles$
|
|
7572
|
-
[styles$
|
|
7573
|
-
}), style: contentFits ? undefined : { '--initital-height': `${initialHeight}px` }, children: [jsx("div", { className: styles$
|
|
7574
|
-
[styles$
|
|
7575
|
-
}), children: jsx("div", { ref: ref, children: children }) }) }), !contentFits && (jsxs(RouteLink, { className: styles$
|
|
7570
|
+
return (jsxs("div", { ref: showAllRef, className: clsx(styles$N['show-all'], {
|
|
7571
|
+
[styles$N['content-fits']]: contentFits,
|
|
7572
|
+
[styles$N['is-open']]: isReallyOpen,
|
|
7573
|
+
}), style: contentFits ? undefined : { '--initital-height': `${initialHeight}px` }, children: [jsx("div", { className: styles$N.panel, children: jsx("div", { className: clsx(styles$N.content, {
|
|
7574
|
+
[styles$N['has-transparency']]: !contentFits && hasTransparency,
|
|
7575
|
+
}), children: jsx("div", { ref: ref, children: children }) }) }), !contentFits && (jsxs(RouteLink, { className: styles$N.button, color: "secondary", onClick: () => {
|
|
7576
7576
|
if (isControlled)
|
|
7577
7577
|
return onToggle(!isControlled);
|
|
7578
7578
|
toggle();
|
|
7579
|
-
}, children: [jsx(GlyphsChevronsSlimDownIcon, { className: styles$
|
|
7579
|
+
}, children: [jsx(GlyphsChevronsSlimDownIcon, { className: styles$N.icon }), isReallyOpen ? (jsx(FormattedMessage, { id: "Show less" })) : (jsx(FormattedMessage, { id: "Show all" }))] }))] }));
|
|
7580
7580
|
}
|
|
7581
7581
|
|
|
7582
|
-
var styles$
|
|
7582
|
+
var styles$M = {"multi-select":"multi-select-module-DC7Ix","filter-item":"multi-select-module-OW-NK"};
|
|
7583
7583
|
|
|
7584
7584
|
function MultiSelect({ amountShown = 3, onChange, options, render, }) {
|
|
7585
7585
|
const shownOptions = options.slice(0, amountShown);
|
|
@@ -7590,28 +7590,28 @@ function MultiSelect({ amountShown = 3, onChange, options, render, }) {
|
|
|
7590
7590
|
options.filter(option => option.isSelected).length === 0) {
|
|
7591
7591
|
return null;
|
|
7592
7592
|
}
|
|
7593
|
-
return (jsxs("div", { className: styles$
|
|
7593
|
+
return (jsxs("div", { className: styles$M['multi-select'], children: [jsx("div", { className: styles$M['filter-items'], children: shownOptions
|
|
7594
7594
|
.concat(isOpen ? [] : hiddenSelectedOptions)
|
|
7595
|
-
.map(option => (jsxs("div", { className: styles$
|
|
7595
|
+
.map(option => (jsxs("div", { className: styles$M['filter-item'], children: [render({ onChange: () => onChange(option), option }), jsxs("span", { children: ["(", option.amount, ")"] })] }, option.value))) }), hiddenOptions.length > 0 && (jsx(ShowAll, { hasTransparency: false, isOpen: isOpen, onToggle: toggle, children: jsx("div", { className: clsx(styles$M['filter-items'], styles$M['hidden']), children: hiddenOptions.map(option => (jsxs("div", { className: styles$M['filter-item'], children: [render({ onChange: () => onChange(option), option }), jsxs("span", { children: ["(", option.amount, ")"] })] }, option.value))) }) }))] }));
|
|
7596
7596
|
}
|
|
7597
7597
|
|
|
7598
|
-
var styles$
|
|
7598
|
+
var styles$L = {"checkbox":"checkbox-module-YNVdd","box":"checkbox-module-UKoyf","checkmark":"checkbox-module-pHIwh","focus":"checkbox-module-v23jy","active":"checkbox-module-7UG-b","color-checkbox":"checkbox-module-nEhvW"};
|
|
7599
7599
|
|
|
7600
7600
|
function Checkbox({ _pseudo = 'none', children, className, isDisabled, isSelected, onChange, value, }) {
|
|
7601
|
-
return (jsxs(Checkbox$1, { className: clsx(className, styles$
|
|
7601
|
+
return (jsxs(Checkbox$1, { className: clsx(className, styles$L.checkbox, styles$L[_pseudo]), isDisabled: isDisabled, isSelected: isSelected, onChange: onChange, value: value, children: [jsx("div", { className: styles$L.box, children: jsx("svg", { "aria-hidden": "true", className: styles$L.checkmark, viewBox: "0 0 18 18", children: jsx("polyline", { points: "1 9 7 14 15 4" }) }) }), children] }));
|
|
7602
7602
|
}
|
|
7603
7603
|
|
|
7604
7604
|
function ColorCheckbox({ _pseudo = 'none', children, className, color, isDisabled, isSelected, onChange, value, }) {
|
|
7605
|
-
return (jsxs(Checkbox$1, { className: clsx(className, styles$
|
|
7605
|
+
return (jsxs(Checkbox$1, { className: clsx(className, styles$L.checkbox, styles$L['color-checkbox'], styles$L[_pseudo]), isDisabled: isDisabled, isSelected: isSelected, onChange: onChange, style: {
|
|
7606
7606
|
'--selected-color': color,
|
|
7607
|
-
}, value: value, children: [jsx("div", { className: styles$
|
|
7607
|
+
}, value: value, children: [jsx("div", { className: styles$L.box }), children] }));
|
|
7608
7608
|
}
|
|
7609
7609
|
|
|
7610
7610
|
function StrokeCheckmarkIcon(props) {
|
|
7611
7611
|
return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", ...props, fill: "currentColor", height: "24", viewBox: "0 0 24 24", width: "24", children: jsx("path", { d: "M10.8641425,17 C10.6636971,17 10.4855234,16.9548533 10.3296214,16.8645598 C10.1737194,16.7742664 10.0252413,16.6388262 9.88418708,16.4582393 L6.27839644,12.2189616 C6.09279881,11.9857035 6,11.744921 6,11.496614 C6,11.2332581 6.08723088,11.0094056 6.26169265,10.8250564 C6.43615442,10.6407073 6.65330364,10.5485327 6.91314031,10.5485327 C7.06904232,10.5485327 7.21195249,10.5823928 7.34187082,10.6501129 C7.47178916,10.717833 7.59985152,10.8382242 7.72605791,11.0112867 L10.8195991,14.7200903 L16.2405345,6.53047404 C16.4558278,6.17682468 16.7230883,6 17.0423163,6 C17.2873051,6 17.5081663,6.08088789 17.7048998,6.24266366 C17.9016333,6.40443943 18,6.61700527 18,6.88036117 C18,7.00075245 17.9721604,7.12302483 17.9164811,7.24717833 C17.8608018,7.37133183 17.7958426,7.48984199 17.7216036,7.6027088 L11.7884187,16.4469526 C11.5582777,16.8156509 11.2501856,17 10.8641425,17 Z", fillRule: "evenodd" }) }));
|
|
7612
7612
|
}
|
|
7613
7613
|
|
|
7614
|
-
var styles$
|
|
7614
|
+
var styles$K = {"select":"select-module-ui-Wc","sm":"select-module-44a1l","md":"select-module-QUm-8","solid":"select-module-IRd4F","button":"select-module-aMQIQ","chevron":"select-module-00uRU","focus":"select-module-XMc0P","popover":"select-module-z8cWq","listbox":"select-module-S21ba","header":"select-module-4Bm2j","item":"select-module-LgEJO","check":"select-module-lQFw3"};
|
|
7615
7615
|
|
|
7616
7616
|
function Select({ isDisabled = false, label, onChange, options, placeholder, selectedOption, showLabel = true, size = 'md', variant = 'outline', }) {
|
|
7617
7617
|
const selectRef = useRef(null);
|
|
@@ -7628,12 +7628,12 @@ function Select({ isDisabled = false, label, onChange, options, placeholder, sel
|
|
|
7628
7628
|
window.addEventListener('resize', updateWidth);
|
|
7629
7629
|
return () => window.removeEventListener('resize', updateWidth);
|
|
7630
7630
|
}, []);
|
|
7631
|
-
return (jsxs(Select$1, { ref: selectRef, "aria-label": label, className: clsx(styles$
|
|
7631
|
+
return (jsxs(Select$1, { ref: selectRef, "aria-label": label, className: clsx(styles$K.select, styles$K[size], styles$K[variant]), isDisabled: isDisabled, onSelectionChange: selected => onChange(selected), placeholder: placeholder || label, selectedKey: String(selectedOption), children: [showLabel && jsx(Label, { children: label }), jsxs(Button$1, { className: styles$K.button, children: [jsx(SelectValue, {}), jsx(GlyphsChevronsSlimDownIcon, { "aria-hidden": "true", className: styles$K.chevron })] }), jsx(Popover, { ref: ref =>
|
|
7632
7632
|
// Workaround for react/react-aria #1513
|
|
7633
|
-
ref?.addEventListener('touchend', e => e.preventDefault()), className: clsx(styles$
|
|
7633
|
+
ref?.addEventListener('touchend', e => e.preventDefault()), className: clsx(styles$K.popover, styles$K[variant]), placement: "bottom left", triggerRef: selectRef, children: jsx(ListBox, { className: styles$K.listbox, children: jsxs(Section, { children: [jsx(Header, { className: styles$K.header, children: placeholder || label }), Object.entries(options).map(([key, value]) => (jsxs(ListBoxItem, { "aria-label": value, className: styles$K.item, id: key, textValue: value, children: [selectedOption === key && (jsx("span", { slot: "description", children: jsx(StrokeCheckmarkIcon, { className: styles$K.check }) })), jsx("span", { slot: "label", children: value })] }, key)))] }) }) })] }));
|
|
7634
7634
|
}
|
|
7635
7635
|
|
|
7636
|
-
var styles$
|
|
7636
|
+
var styles$J = {"input-container":"textarea-module-C6Xr1","lg":"textarea-module-vksG-","md":"textarea-module-6JrQJ"};
|
|
7637
7637
|
|
|
7638
7638
|
/**
|
|
7639
7639
|
* This component is used to create a textarea that can grow as the user types.
|
|
@@ -7668,7 +7668,7 @@ const TextArea = forwardRef(({ autoGrow, size, ...textAreaProps }, _ref) => {
|
|
|
7668
7668
|
}
|
|
7669
7669
|
updateHeight();
|
|
7670
7670
|
}, [ref, autoGrow, updateHeight, size]);
|
|
7671
|
-
return (jsx("div", { className: styles$
|
|
7671
|
+
return (jsx("div", { className: styles$J['input-container'], children: jsx(TextArea$1, { ...textAreaProps, ref: node => {
|
|
7672
7672
|
ref.current =
|
|
7673
7673
|
node;
|
|
7674
7674
|
textAreaRef.current = node;
|
|
@@ -7679,7 +7679,7 @@ const TextArea = forwardRef(({ autoGrow, size, ...textAreaProps }, _ref) => {
|
|
|
7679
7679
|
});
|
|
7680
7680
|
TextArea.displayName = 'TextArea';
|
|
7681
7681
|
|
|
7682
|
-
var styles$
|
|
7682
|
+
var styles$I = {"field":"text-field-module-JeaK0"};
|
|
7683
7683
|
|
|
7684
7684
|
/**
|
|
7685
7685
|
* This component is used to create a text field.
|
|
@@ -7687,7 +7687,7 @@ var styles$G = {"field":"text-field-module-JeaK0"};
|
|
|
7687
7687
|
* This field can also grow when a user types in text.
|
|
7688
7688
|
*/
|
|
7689
7689
|
function TextField({ autoFocus, autoGrow, defaultValue, isDisabled, isInvalid, isMultiline, isReadOnly, isRequired, label, maxLength, name, onChange, onInput, onKeyUp, placeholder, rows, showLabel = false, size = 'lg', value, }) {
|
|
7690
|
-
return (jsxs(TextField$1, { "aria-label": label, autoFocus: autoFocus, className: clsx(styles$
|
|
7690
|
+
return (jsxs(TextField$1, { "aria-label": label, autoFocus: autoFocus, className: clsx(styles$I.field, styles$I[size]), defaultValue: defaultValue, isDisabled: isDisabled, isInvalid: isInvalid, isReadOnly: isReadOnly, isRequired: isRequired, maxLength: maxLength, name: name, onChange: value => {
|
|
7691
7691
|
onChange?.(value);
|
|
7692
7692
|
}, onInput: onInput, onKeyUp: e => onKeyUp?.(e), value: value, children: [showLabel && jsx(Label, { isRequired: isRequired, children: label }), isMultiline ? (jsx(TextArea, { autoGrow: autoGrow, placeholder: placeholder, rows: rows, size: size })) : (jsx(Input, { autoGrow: autoGrow, placeholder: placeholder, size: size })), jsx(FieldError, {})] }));
|
|
7693
7693
|
}
|
|
@@ -7697,22 +7697,148 @@ function IntlProvider({ children, formatMessage, languageCode: _languageCode, })
|
|
|
7697
7697
|
return (jsx(IntlContext.Provider, { value: { formatMessage, languageCode, updateLanguageCode }, children: children }));
|
|
7698
7698
|
}
|
|
7699
7699
|
|
|
7700
|
-
var styles$
|
|
7700
|
+
var styles$H = {"progress-circle":"progress-circle-module-4nweP","spin":"progress-circle-module-kCf7K"};
|
|
7701
7701
|
|
|
7702
7702
|
function ProgressCircle({ className }) {
|
|
7703
|
-
return (jsxs("svg", { className: clsx(styles$
|
|
7703
|
+
return (jsxs("svg", { className: clsx(styles$H['progress-circle'], className), viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", children: [jsx("title", { children: "Spinner" }), jsxs("defs", { children: [jsx("pattern", { height: "100%", id: "pattern-1", patternUnits: "objectBoundingBox", width: "100%", children: jsx("use", { xlinkHref: "#image-2" }) }), jsx("image", { height: "24", id: "image-2", width: "24", xlinkHref: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAGKADAAQAAAABAAAAGAAAAADiNXWtAAAB7UlEQVRIDZ2VSaoCQQyG01rOoBtBr+YZXXsFL+BGEHcqDuCE89SPL480hdpiGYil3an/S1KDUavViq/Xq1wul8RPp5Ocz2dhPB6PiR8OB42RAHO5XE7D4zgW/PF4CM/u97tks1n1TCYjURSpB2hraALglw8BQGXOuQQSKk68y+fzL9lRBQAqAUIlVkUoxBUKBZ3sC1irbrdbUoX/PgTyAqDXmFVBBVRCFfYuGMBk67UvRCUA2FFAfgKUSiWhFTgQA9ESjLVgC7NWwEPNFYtFFUEICJnigAxCFbvd7jcAFVi/gbDoCALmOzCMAzebzUILEFculxVgOwcIDqRSqaiTBDadToMhziYDwBgNRmW0rdFoSLPZ1PeDwUDHbz+iTqejyv5VYHuekbVggavVqkLq9fq32hqnLTJxdgmijPQeYSqs1Woa3G63g8QJ1haZKMJkjDgLjLi/Nbvd7m8ARCxry9x2jyn2ej2ZTCb28+tRK/Azpy3vrN/vy2azeffq4zM9aLTFP1jPM4bDoWbPH06o6WXn9/lZgDMxGo1kuVwG/5uhlfkkTsB4PJb5fC7b7VYPH89C7P9GS5nBLYr4er2W/X6vhy4lNPXxR8BisdDWkD13Ee0KtVQAgqvVSncO2XNlc3WEWirAxLmmgf0K+ANZ6DTlvO5jwwAAAABJRU5ErkJggg==" })] }), jsx("g", { fill: "none", fillRule: "evenodd", id: "Page-1", stroke: "none", strokeWidth: "1", children: jsx("path", { d: "M12,0 C18.627417,0 24,5.372583 24,12 C24,14.7277828 23.0855773,17.3196292 21.4324752,19.4188392 C19.1717866,22.2895997 15.7255176,24 12,24 C11.2636203,24 10.6666667,23.4030463 10.6666667,22.6666667 C10.6666667,21.930287 11.2636203,21.3333333 12,21.3333333 C14.8994206,21.3333333 17.5771113,20.0043823 19.3374325,17.7690188 C20.6234737,16.1359252 21.3333333,14.1238938 21.3333333,12 C21.3333333,6.84534234 17.1546577,2.66666667 12,2.66666667 C6.84534234,2.66666667 2.66666667,6.84534234 2.66666667,12 C2.66666667,14.4546154 3.61656005,16.756214 5.28844833,18.485859 C5.80023235,19.015323 5.78589988,19.8594213 5.25643588,20.3712053 C4.72697187,20.8829893 3.88287357,20.8686569 3.37108955,20.3391928 C1.22326178,18.1171666 0,15.1531945 0,12 C0,5.372583 5.372583,0 12,0 Z", fill: "url(#pattern-1)", fillRule: "nonzero", id: "Spinner" }) })] }));
|
|
7704
7704
|
}
|
|
7705
7705
|
|
|
7706
|
-
var styles$
|
|
7706
|
+
var styles$G = {"product-grid":"product-overview-grid-module-bzys-","loading-panel":"product-overview-grid-module-XikkF","fade-in":"product-overview-grid-module-A6CS7","progress-circle":"product-overview-grid-module-DWnnI","fade-in-spinner":"product-overview-grid-module-r-wvY","grid-item":"product-overview-grid-module-MlUVA"};
|
|
7707
7707
|
|
|
7708
7708
|
function ProductOverviewGrid({ children, isLoading, }) {
|
|
7709
|
-
return (jsxs("div", { className: styles$
|
|
7709
|
+
return (jsxs("div", { className: styles$G['product-grid'], children: [Children.map(children, (child, index) => (jsx("div", { className: styles$G['grid-item'], children: child }, index))), isLoading && (jsx("div", { className: styles$G['loading-panel'], children: jsx(ProgressCircle, { className: styles$G['progress-circle'] }) }))] }));
|
|
7710
7710
|
}
|
|
7711
7711
|
|
|
7712
|
-
var styles$
|
|
7712
|
+
var styles$F = {"loading-overlay":"loading-overlay-module-L67Gy"};
|
|
7713
7713
|
|
|
7714
7714
|
function LoadingOverlay() {
|
|
7715
|
-
return (jsx("div", { className: styles$
|
|
7715
|
+
return (jsx("div", { className: styles$F['loading-overlay'], children: jsx(ProgressCircle, {}) }));
|
|
7716
|
+
}
|
|
7717
|
+
|
|
7718
|
+
function useLanguageCode() {
|
|
7719
|
+
const { languageCode } = useContext(IntlContext);
|
|
7720
|
+
return languageCode;
|
|
7721
|
+
}
|
|
7722
|
+
|
|
7723
|
+
const announcementTypes = [
|
|
7724
|
+
'promo',
|
|
7725
|
+
'informative',
|
|
7726
|
+
'notice',
|
|
7727
|
+
'critical',
|
|
7728
|
+
];
|
|
7729
|
+
function isAnnouncementType(type) {
|
|
7730
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
7731
|
+
return announcementTypes.includes(type);
|
|
7732
|
+
}
|
|
7733
|
+
|
|
7734
|
+
function useFetchAnnouncements({ languageCode, }) {
|
|
7735
|
+
return useQuery({
|
|
7736
|
+
gcTime: 1 * TIME.DAY,
|
|
7737
|
+
queryFn: async () => await request({
|
|
7738
|
+
headers: { 'Current-Language-Id': languageCode },
|
|
7739
|
+
url: `${config.BFF_API_URL}/notification/announcement`,
|
|
7740
|
+
}),
|
|
7741
|
+
queryKey: ['announcements', languageCode],
|
|
7742
|
+
select: ({ body }) => body.map(({ endDate, href, id, startDate, text, title, type }) => {
|
|
7743
|
+
if (!isAnnouncementType(type))
|
|
7744
|
+
throw new Error(`Invalid announcement type: ${type}`);
|
|
7745
|
+
return {
|
|
7746
|
+
endDate: endDate ? new Date(endDate) : undefined,
|
|
7747
|
+
href,
|
|
7748
|
+
id,
|
|
7749
|
+
startDate: startDate ? new Date(startDate) : undefined,
|
|
7750
|
+
text,
|
|
7751
|
+
title,
|
|
7752
|
+
type,
|
|
7753
|
+
};
|
|
7754
|
+
}),
|
|
7755
|
+
staleTime: 1 * TIME.DAY,
|
|
7756
|
+
});
|
|
7757
|
+
}
|
|
7758
|
+
|
|
7759
|
+
function useLocalStorage(key, initialState) {
|
|
7760
|
+
const storedValue = localStorage.getItem(key);
|
|
7761
|
+
const [dismissedIds, setDismissedIds] = useState(storedValue ? JSON.parse(storedValue) : initialState);
|
|
7762
|
+
function setValue(value) {
|
|
7763
|
+
const valueToStore = value instanceof Function ? value(dismissedIds) : value;
|
|
7764
|
+
if (valueToStore === undefined) {
|
|
7765
|
+
localStorage.removeItem(key);
|
|
7766
|
+
}
|
|
7767
|
+
else {
|
|
7768
|
+
setDismissedIds(valueToStore);
|
|
7769
|
+
localStorage.setItem(key, JSON.stringify(valueToStore));
|
|
7770
|
+
}
|
|
7771
|
+
}
|
|
7772
|
+
return [dismissedIds, setValue];
|
|
7773
|
+
}
|
|
7774
|
+
|
|
7775
|
+
function GlyphsArrowSemiBoldRightIcon(props) {
|
|
7776
|
+
return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", ...props, fill: "currentColor", height: "11", viewBox: "0 0 11 11", width: "11", children: jsx("path", { d: "M4.27243829,10 C4.05910402,10.0007527 3.92860879,9.73966348 4.04161427,9.53832073 L6.25359309,5.59919963 C6.37846177,5.37673437 6.36029412,5.09278754 6.20830955,4.89272723 L4.38978231,2.4963789 C4.24091607,2.30024134 4.36625928,2 4.59701551,2 L6.06357848,2 C6.14343478,2 6.2192237,2.03915207 6.27074389,2.10704584 L7.47868905,3.69877757 C8.09849054,4.51523787 8.1726525,5.67297753 7.66341606,6.57973654 L5.82495864,9.85357414 C5.77553993,9.94153429 5.68904024,9.99509493 5.59582936,9.99539668 L4.27243829,10 Z", fillRule: "evenodd" }) }));
|
|
7777
|
+
}
|
|
7778
|
+
|
|
7779
|
+
function SolidAttentionIcon(props) {
|
|
7780
|
+
return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", ...props, fill: "currentColor", height: "24", viewBox: "0 0 24 24", width: "24", children: jsx("path", { d: "M9.0606215,21.2358635 L14.9393785,21.2358635 C15.346918,21.2358635 15.6984208,21.1934114 15.9938869,21.1085074 C16.289353,21.0236033 16.5525556,20.8962472 16.7834947,20.7264391 C17.0144337,20.556631 17.2351842,20.3528613 17.4457463,20.1151299 L21.1747326,15.9887927 C21.3920869,15.7510613 21.560197,15.5269146 21.6790627,15.3163525 C21.7979283,15.1057905 21.8811343,14.8833418 21.9286806,14.6490066 C21.9762269,14.4146714 22,14.1310919 22,13.798268 L22,9.447784 C22,9.1149601 21.9745288,8.83138054 21.9235863,8.59704534 C21.8726439,8.36271014 21.7860418,8.14195959 21.6637799,7.93479368 C21.5415181,7.72762778 21.37171,7.50178299 21.1543556,7.2572593 L17.4457463,3.12073357 C17.2351842,2.88979453 17.0161318,2.68942095 16.7885889,2.51961284 C16.561046,2.34980472 16.2978434,2.22075055 15.9989812,2.13245033 C15.7001189,2.04415011 15.346918,2 14.9393785,2 L9.0606215,2 C8.65308202,2 8.30157922,2.04415011 8.00611309,2.13245033 C7.71064697,2.22075055 7.44914247,2.34980472 7.22159959,2.51961284 C6.99405672,2.68942095 6.77160808,2.88979453 6.55425369,3.12073357 L2.82526745,7.2572593 C2.60112073,7.49499066 2.42961454,7.71743929 2.31074885,7.9246052 C2.19188317,8.1317711 2.11037528,8.35421973 2.06622517,8.5919511 C2.02207506,8.82968246 2,9.1149601 2,9.447784 L2,13.798268 C2,14.1310919 2.02207506,14.4146714 2.06622517,14.6490066 C2.11037528,14.8833418 2.19188317,15.1057905 2.31074885,15.3163525 C2.42961454,15.5269146 2.60112073,15.7510613 2.82526745,15.9887927 L6.55425369,20.1151299 C6.77160808,20.3528613 6.99405672,20.556631 7.22159959,20.7264391 C7.44914247,20.8962472 7.71064697,21.0236033 8.00611309,21.1085074 C8.30157922,21.1934114 8.65308202,21.2358635 9.0606215,21.2358635 Z M12.0152827,13.339786 C11.4583121,13.339786 11.1730345,13.0579046 11.1594498,12.4941416 L11.0269995,7.46102904 C11.0202072,7.18933605 11.1068093,6.96349125 11.2868059,6.78349465 C11.4668025,6.60349805 11.7028358,6.51349975 11.9949058,6.51349975 C12.2869757,6.51349975 12.5247071,6.60519613 12.7080998,6.78858889 C12.8914926,6.97198166 12.983189,7.19952454 12.983189,7.47121752 L12.8405502,12.4941416 C12.8269655,13.0579046 12.5518764,13.339786 12.0152827,13.339786 Z M12.0152827,16.6204789 C11.7028358,16.6204789 11.434539,16.518594 11.2103923,16.3148242 C10.9862455,16.1110545 10.8741722,15.8563423 10.8741722,15.5506877 C10.8741722,15.2518254 10.9862455,14.9988113 11.2103923,14.7916454 C11.434539,14.5844795 11.7028358,14.4808966 12.0152827,14.4808966 C12.3209373,14.4808966 12.585838,14.5827815 12.8099847,14.7865512 C13.0341314,14.9903209 13.1462048,15.2450331 13.1462048,15.5506877 C13.1462048,15.8631347 13.0324334,16.1195449 12.8048905,16.3199185 C12.5773476,16.5202921 12.314145,16.6204789 12.0152827,16.6204789 Z" }) }));
|
|
7781
|
+
}
|
|
7782
|
+
|
|
7783
|
+
function SolidInformationIcon(props) {
|
|
7784
|
+
return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", ...props, fill: "currentColor", height: "24", viewBox: "0 0 24 24", width: "24", children: jsx("path", { d: "M11.9997748,2 C17.5138784,2 22,6.48597148 22,11.9997748 C22,17.5138784 17.5138784,22 11.9997748,22 C6.48597148,22 2,17.5138784 2,11.9997748 C2,6.48597148 6.48597148,2 11.9997748,2 Z M12,10.0686973 C11.2652767,10.0686973 10.6699001,10.6642241 10.6699001,11.3989474 L10.6699001,16.8046369 C10.6699001,17.53921 11.2652767,18.1347368 12,18.1347368 C12.7347233,18.1347368 13.3300999,17.53921 13.3300999,16.8046369 L13.3300999,11.3989474 C13.3300999,10.6642241 12.7347233,10.0686973 12,10.0686973 Z M12.00003,5.9387205 C11.2663578,5.9387205 10.6694796,6.53559872 10.6694796,7.26927091 C10.6694796,8.0029431 11.2663578,8.59982131 12.00003,8.59982131 C12.7337022,8.59982131 13.3305804,8.0029431 13.3305804,7.26927091 C13.3305804,6.53559872 12.7337022,5.9387205 12.00003,5.9387205 Z", fillRule: "evenodd" }) }));
|
|
7785
|
+
}
|
|
7786
|
+
|
|
7787
|
+
function SolidNoticeIcon(props) {
|
|
7788
|
+
return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", ...props, fill: "currentColor", height: "24", viewBox: "0 0 24 24", width: "24", children: jsx("path", { d: "M4.65060241,21.1425703 L19.3493976,21.1425703 C19.8982597,21.1425703 20.3701473,21.0254351 20.7650602,20.7911647 C21.1599732,20.5568942 21.4645248,20.2406292 21.6787149,19.8423695 C21.892905,19.4441098 22,18.9973226 22,18.502008 C22,18.2811245 21.9682062,18.0568942 21.9046185,17.8293173 C21.8410308,17.6017403 21.748996,17.37751 21.6285141,17.1566265 L14.2690763,4.3253012 C14.0147256,3.89022758 13.6834003,3.56057564 13.2751004,3.33634538 C12.8668005,3.11211513 12.4417671,3 12,3 C11.5515395,3 11.1231593,3.11211513 10.7148594,3.33634538 C10.3065596,3.56057564 9.97858099,3.89022758 9.73092369,4.3253012 L2.37148594,17.1566265 C2.12382865,17.5850067 2,18.0334672 2,18.502008 C2,18.9973226 2.10709505,19.4441098 2.32128514,19.8423695 C2.53547523,20.2406292 2.84002677,20.5568942 3.23493976,20.7911647 C3.62985274,21.0254351 4.10174029,21.1425703 4.65060241,21.1425703 Z M12.0100402,14.7068273 C11.461178,14.7068273 11.1800535,14.4290495 11.1666667,13.873494 L11.0361446,8.91365462 C11.0294511,8.645917 11.1147925,8.42336011 11.2921687,8.24598394 C11.4695448,8.06860776 11.7021419,7.97991968 11.9899598,7.97991968 C12.2777778,7.97991968 12.5120482,8.07028112 12.6927711,8.25100402 C12.873494,8.43172691 12.9638554,8.65595716 12.9638554,8.92369478 L12.8232932,13.873494 C12.8099063,14.4290495 12.538822,14.7068273 12.0100402,14.7068273 Z M12.0100402,17.939759 C11.7021419,17.939759 11.437751,17.8393574 11.2168675,17.6385542 C10.9959839,17.437751 10.8855422,17.186747 10.8855422,16.8855422 C10.8855422,16.5910308 10.9959839,16.3417001 11.2168675,16.1375502 C11.437751,15.9334003 11.7021419,15.8313253 12.0100402,15.8313253 C12.311245,15.8313253 12.5722892,15.9317269 12.7931727,16.1325301 C13.0140562,16.3333333 13.124498,16.5843373 13.124498,16.8855422 C13.124498,17.1934404 13.0123829,17.4461178 12.7881526,17.6435743 C12.5639224,17.8410308 12.3045515,17.939759 12.0100402,17.939759 Z" }) }));
|
|
7789
|
+
}
|
|
7790
|
+
|
|
7791
|
+
function StrokeCloseboxIcon(props) {
|
|
7792
|
+
return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", ...props, height: "24", viewBox: "0 0 24 24", width: "24", children: jsx("path", { d: "M8,8 L16,16 M16,8 L8,16", fill: "currentColor", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.4" }) }));
|
|
7793
|
+
}
|
|
7794
|
+
|
|
7795
|
+
var styles$E = {"announcement":"announcement-module-Xi0L5","wrapper":"announcement-module-4XVjD","icon":"announcement-module-lxmA2","content":"announcement-module-1Jn7y","title":"announcement-module-8k2rK","text":"announcement-module-yXGsN","close":"announcement-module-gZ9ae","informative":"announcement-module-0LTWL","notice":"announcement-module-Ga3lN","critical":"announcement-module-S3nSW","promo":"announcement-module-E6DqW"};
|
|
7796
|
+
|
|
7797
|
+
const iconMap = {
|
|
7798
|
+
critical: jsx(SolidAttentionIcon, {}),
|
|
7799
|
+
informative: jsx(SolidInformationIcon, {}),
|
|
7800
|
+
notice: jsx(SolidNoticeIcon, {}),
|
|
7801
|
+
promo: jsx(SolidInformationIcon, {}),
|
|
7802
|
+
};
|
|
7803
|
+
function Announcement({ announcement: { href, id, text, title, type }, onDismiss, }) {
|
|
7804
|
+
return (jsxs(RouteLink, { className: clsx(styles$E.announcement, styles$E[type]), href: href, children: [jsxs("div", { className: styles$E.wrapper, children: [jsx("div", { className: styles$E.icon, children: iconMap[type] }), jsxs("div", { className: styles$E.content, children: [jsx("h2", { className: styles$E.title, children: title }), jsxs("p", { className: styles$E.text, children: [text, jsx(GlyphsArrowSemiBoldRightIcon, {})] })] })] }), jsx("div", { className: styles$E.close, children: jsx(IconButton, { color: "current-color", onClick: () => onDismiss?.(id), children: jsx(StrokeCloseboxIcon, {}) }) })] }));
|
|
7805
|
+
}
|
|
7806
|
+
|
|
7807
|
+
function ConnectedAnnouncement({ announcement: { endDate, startDate, ...announcement }, onDismiss, }) {
|
|
7808
|
+
useEffect(() => {
|
|
7809
|
+
const interval = setInterval(() => {
|
|
7810
|
+
if (endDate && endDate < new Date()) {
|
|
7811
|
+
onDismiss?.(announcement.id);
|
|
7812
|
+
}
|
|
7813
|
+
}, 1 * TIME.MINUTE);
|
|
7814
|
+
return () => clearInterval(interval);
|
|
7815
|
+
}, [endDate, onDismiss, announcement.id]);
|
|
7816
|
+
if (startDate && startDate > new Date())
|
|
7817
|
+
return null;
|
|
7818
|
+
return jsx(Announcement, { announcement: announcement, onDismiss: onDismiss });
|
|
7819
|
+
}
|
|
7820
|
+
|
|
7821
|
+
var styles$D = {"announcement-enter":"announcement-provider-module-ksjgO","announcement-enter-active":"announcement-provider-module-k0zd-","announcement-exit":"announcement-provider-module-w2N0B","announcement-exit-active":"announcement-provider-module-4lfx2"};
|
|
7822
|
+
|
|
7823
|
+
function AnnouncementProvider() {
|
|
7824
|
+
const languageCode = useLanguageCode();
|
|
7825
|
+
const { data: announcements } = useFetchAnnouncements({
|
|
7826
|
+
languageCode,
|
|
7827
|
+
});
|
|
7828
|
+
const [dismissedIds, setDismissedIds] = useLocalStorage('dismissedAnnouncementIds', []);
|
|
7829
|
+
const filteredAnnouncements = announcements?.filter(({ id }) => !dismissedIds.includes(id));
|
|
7830
|
+
return (jsx(TransitionGroup, { children: filteredAnnouncements?.map(({ href, id, text, title, type }) => (jsx(CSSTransition, { classNames: {
|
|
7831
|
+
enter: styles$D['announcement-enter'],
|
|
7832
|
+
enterActive: styles$D['announcement-enter-active'],
|
|
7833
|
+
exit: styles$D['announcement-exit'],
|
|
7834
|
+
exitActive: styles$D['announcement-exit-active'],
|
|
7835
|
+
}, timeout: 300, children: jsx(ConnectedAnnouncement, { announcement: {
|
|
7836
|
+
href,
|
|
7837
|
+
id,
|
|
7838
|
+
text,
|
|
7839
|
+
title,
|
|
7840
|
+
type,
|
|
7841
|
+
}, onDismiss: id => setDismissedIds(dismissedIds => [...dismissedIds, id]) }) }, id))) }));
|
|
7716
7842
|
}
|
|
7717
7843
|
|
|
7718
7844
|
var styles$C = {"page-container":"page-container-module-PYmbC","inner-page-container":"page-container-module-uD8GF"};
|
|
@@ -7765,10 +7891,6 @@ function ListItem({ icon, text }) {
|
|
|
7765
7891
|
return (jsxs("li", { className: styles$z['list-item'], children: [icon && jsx("span", { className: styles$z.icon, children: icon }), text] }));
|
|
7766
7892
|
}
|
|
7767
7893
|
|
|
7768
|
-
function StrokeCloseboxIcon(props) {
|
|
7769
|
-
return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", ...props, height: "24", viewBox: "0 0 24 24", width: "24", children: jsx("path", { d: "M8,8 L16,16 M16,8 L8,16", fill: "currentColor", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.4" }) }));
|
|
7770
|
-
}
|
|
7771
|
-
|
|
7772
7894
|
var styles$y = {"modal-overlay":"modal-module-rVFJc","modal-fade":"modal-module-63Uyl","is-full-screen":"modal-module-uwets","modal":"modal-module-6vlFt","modal-zoom":"modal-module-aPJ7X","dialog":"modal-module-7c3-9","close":"modal-module-7zIZE"};
|
|
7773
7895
|
|
|
7774
7896
|
function Modal({ children, className, hasCloseButton, isDismissable, isFullScreen, isKeyboardDismissDisabled, isOpen, onOpenChange, }) {
|
|
@@ -8073,11 +8195,6 @@ function ProductUSPCarousel({ usps }) {
|
|
|
8073
8195
|
return (jsx(USPCarousel, { slides: usps.map((usp, index) => (jsx(ProductUsp, { usp: usp }, index))) }));
|
|
8074
8196
|
}
|
|
8075
8197
|
|
|
8076
|
-
function useLanguageCode() {
|
|
8077
|
-
const { languageCode } = useContext(IntlContext);
|
|
8078
|
-
return languageCode;
|
|
8079
|
-
}
|
|
8080
|
-
|
|
8081
8198
|
function ErrorPage({ error }) {
|
|
8082
8199
|
useEffect(() => {
|
|
8083
8200
|
setTimeout(() => {
|
|
@@ -8255,9 +8372,9 @@ function AccordionItem({ _pseudo = 'none', borderType = 'bottom', children, clas
|
|
|
8255
8372
|
const panelId = `panel-${id}`;
|
|
8256
8373
|
return (jsxs("div", { className: clsx(className, ...[]
|
|
8257
8374
|
.concat(borderType)
|
|
8258
|
-
.map(type => styles$
|
|
8259
|
-
[styles$
|
|
8260
|
-
}), children: [jsx("h3", { children: jsxs("button", { "aria-controls": panelId, "aria-expanded": isOpen, className: clsx(styles$
|
|
8375
|
+
.map(type => styles$O[`border-type-${type}`]), styles$O['accordion-item'], {
|
|
8376
|
+
[styles$O['is-open']]: isOpen,
|
|
8377
|
+
}), children: [jsx("h3", { children: jsxs("button", { "aria-controls": panelId, "aria-expanded": isOpen, className: clsx(styles$O.button, styles$O[_pseudo]), disabled: isDisabled, id: id, onClick: toggle, type: "button", children: [title, jsx("span", { className: styles$O.icon, children: size === 'lg' ? (jsx(GlyphsChevronsBoldDownIcon, {})) : (jsx(GlyphsChevronsSlimDownIcon, {})) })] }) }), jsx("div", { "aria-labelledby": id, className: styles$O.panel, id: panelId, role: "region", children: jsx("div", { className: styles$O.content, children: children }) })] }));
|
|
8261
8378
|
}
|
|
8262
8379
|
|
|
8263
8380
|
function StrokeDownloadIcon(props) {
|
|
@@ -9331,24 +9448,23 @@ function ProductListingProductOverview() {
|
|
|
9331
9448
|
|
|
9332
9449
|
var styles$c = {"product-listing":"product-listing-page-module-dmIHF","header":"product-listing-page-module-Oz76Z","promos":"product-listing-page-module-iY1yj","action-bar":"product-listing-page-module-XxGrr","sidebar-toggle":"product-listing-page-module-F7bxy","sort":"product-listing-page-module-aQzHr","count":"product-listing-page-module-zx79v","categories":"product-listing-page-module-R4aOl","product-grid-container":"product-listing-page-module-ICkKg","product-grid":"product-listing-page-module-LHE7z","pagination":"product-listing-page-module-xsRaj"};
|
|
9333
9450
|
|
|
9334
|
-
|
|
9451
|
+
const defaultSearchClient = createSonicSearchClient({
|
|
9452
|
+
apiKey: config.ALGOLIA_API_KEY,
|
|
9453
|
+
appId: config.ALGOLIA_APP_ID,
|
|
9454
|
+
host: config.ALGOLIA_HOST,
|
|
9455
|
+
});
|
|
9456
|
+
function ProductListingPage({ pageUrl, searchClient = defaultSearchClient, }) {
|
|
9335
9457
|
const languageCode = useLanguageCode();
|
|
9336
9458
|
const { data, error, isError, isFetching } = useFetchProductListingPageData({
|
|
9337
9459
|
languageCode,
|
|
9338
9460
|
pageUrl,
|
|
9339
9461
|
});
|
|
9340
|
-
const searchClient = useMemo(() => _searchClient ||
|
|
9341
|
-
createSonicSearchClient({
|
|
9342
|
-
apiKey: config.ALGOLIA_API_KEY,
|
|
9343
|
-
appId: config.ALGOLIA_APP_ID,
|
|
9344
|
-
host: config.ALGOLIA_HOST,
|
|
9345
|
-
}), [_searchClient]);
|
|
9346
9462
|
if (isError)
|
|
9347
9463
|
return jsx(ErrorPage, { error: error });
|
|
9348
9464
|
if (!data || isFetching)
|
|
9349
9465
|
return jsx(LoadingPage, {});
|
|
9350
9466
|
const category = data.breadCrumb.slice(1).map(breadCrumb => breadCrumb.label);
|
|
9351
|
-
return (jsx(ProductListingPageProvider, { data: data, error: error, isError: isError, isLoading: isFetching, children: jsx(AlgoliaProvider, { categoryPages: data.categoryPages, hierarchicalCategories: data.hierarchicalCategories, languageCode: languageCode, offlineSearchClient: offlineSearchClient, searchClient: searchClient, children: jsx(Page, { breadCrumb: data.breadCrumb, className: styles$c['product-listing'], title: category.slice().pop(), children: jsx(ProductListingPageContent, { currentCategoryPath: data.hierarchicalCategories, promoCards: data.promoCards?.top }) }) }) }));
|
|
9467
|
+
return (jsx(ProductListingPageProvider, { data: data, error: error, isError: isError, isLoading: isFetching, children: jsx(AlgoliaProvider, { categoryPages: data.categoryPages, hierarchicalCategories: data.hierarchicalCategories, languageCode: languageCode, offlineSearchClient: offlineSearchClient, searchClient: searchClient, children: jsx(Page, { breadCrumb: data.breadCrumb, className: styles$c['product-listing'], title: category.slice().pop(), children: jsx(ProductListingPageContent, { currentCategoryPath: data.hierarchicalCategories, promoCards: data.promoCards?.top }) }) }, data.categoryPages) }));
|
|
9352
9468
|
}
|
|
9353
9469
|
function ProductListingPageContent({ currentCategoryPath, promoCards, }) {
|
|
9354
9470
|
const { isLoading, products } = useAlgoliaProductHits();
|
|
@@ -10085,4 +10201,4 @@ console.log(`@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
|
|
|
10085
10201
|
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
|
|
10086
10202
|
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@`);
|
|
10087
10203
|
|
|
10088
|
-
export { Accordion, AddToCartButton, AlgoliaActiveCategories, AlgoliaCategoriesFilters, AlgoliaFilterPanel, AlgoliaInsightsProvider, AlgoliaInsightsProviderContext, AlgoliaMultiSelectFilterSection, AlgoliaPagination, AlgoliaProvider, AlgoliaResultsCount, AlgoliaSortBy, AvailabilityMessageType, BadRequestError, BadgeImagePlacementValues, BadgeStyleValues, BadgeTypeValues, Breadcrumb, Button, CartProvider, CategoryCarousel, Checkbox, ColorCheckbox, ConnectedAddToCartButton, CurrencyPositioningType, FavoriteButton, FavoriteProvider, FilterSection, ForbiddenRequestError, FormattedMessage, GlobalSearch, GlobalSearchDisclosureContext, GlobalSearchProvider, GlobalStateProvider, GlobalStateProviderContext, IconButton, Image, InternalServerErrorRequest, IntlProvider, Link, LoadingOverlay, MultiSelect, NotFoundRequestError, NumberField, Page, PageContainer, ProductCard, ProductDetailsPage, ProductListingPage, ProductOverviewGrid, ProductPrice, ProductSku, ProgressCircle, ReactQueryContainer, RequestError, RouteButton, RouteLink, RouteProvider, SearchResultsPage, SearchRoot, Select, ShowAll, Sidebar, SidebarDetectBreakpoint, SidebarProvider, TextField, TimeoutRequestError, UnauthorizedRequestError, UnprocessableContentRequestError, VariantDisplayTypeValues, WishListNameAlreadyExistsError, addProductToCurrentCart, addWishListItemToWishList, config, configPerEnvironment, createSession, createSonicSearchClient, createWishList, deleteCartLineById, deleteWishList, deleteWishListItemFromWishList, environment, environments, fetchCurrentCartLines, fetchTranslations, getSession, getWishList, getWishListItemsByWishListId, getWishLists, isRequestError, request, signIn, signOut, transformAlgoliaProductHitToProductHit, updateCartLineById, useAddProductToCurrentCart, useAddWishListItemToCurrentWishList, useAddWishListItemToWishList, useAlgolia, useAlgoliaInsights, useAlgoliaSearch, useBreakpoint, useCartEvents, useCreateWishList, useDebouncedCallback, useDeleteCartLineById, useDeleteWishListItemFromWishList, useDisclosure, useFavorite, useFavoriteProduct, useFeatureFlags, useFetchAllWishListsItems, useFetchCurrentCartLines, useFetchTranslations, useFetchWishLists, useFormattedMessage, useGlobalSearchDisclosure, useGlobalState, useIsAuthenticated, useIsBreakpoint, useNavigate, useOnNavigate, useScrollLock, useSession, useSignIn, useSignOut, useUpdateCartLineById, userToken };
|
|
10204
|
+
export { Accordion, AddToCartButton, AlgoliaActiveCategories, AlgoliaCategoriesFilters, AlgoliaFilterPanel, AlgoliaInsightsProvider, AlgoliaInsightsProviderContext, AlgoliaMultiSelectFilterSection, AlgoliaPagination, AlgoliaProvider, AlgoliaResultsCount, AlgoliaSortBy, AnnouncementProvider, AvailabilityMessageType, BadRequestError, BadgeImagePlacementValues, BadgeStyleValues, BadgeTypeValues, Breadcrumb, Button, CartProvider, CategoryCarousel, Checkbox, ColorCheckbox, ConnectedAddToCartButton, CurrencyPositioningType, FavoriteButton, FavoriteProvider, FilterSection, ForbiddenRequestError, FormattedMessage, GlobalSearch, GlobalSearchDisclosureContext, GlobalSearchProvider, GlobalStateProvider, GlobalStateProviderContext, IconButton, Image, InternalServerErrorRequest, IntlProvider, Link, LoadingOverlay, MultiSelect, NotFoundRequestError, NumberField, Page, PageContainer, ProductCard, ProductDetailsPage, ProductListingPage, ProductOverviewGrid, ProductPrice, ProductSku, ProgressCircle, ReactQueryContainer, RequestError, RouteButton, RouteLink, RouteProvider, SearchResultsPage, SearchRoot, Select, ShowAll, Sidebar, SidebarDetectBreakpoint, SidebarProvider, TextField, TimeoutRequestError, UnauthorizedRequestError, UnprocessableContentRequestError, VariantDisplayTypeValues, WishListNameAlreadyExistsError, addProductToCurrentCart, addWishListItemToWishList, config, configPerEnvironment, createSession, createSonicSearchClient, createWishList, deleteCartLineById, deleteWishList, deleteWishListItemFromWishList, environment, environments, fetchCurrentCartLines, fetchTranslations, getSession, getWishList, getWishListItemsByWishListId, getWishLists, isRequestError, request, signIn, signOut, transformAlgoliaProductHitToProductHit, updateCartLineById, useAddProductToCurrentCart, useAddWishListItemToCurrentWishList, useAddWishListItemToWishList, useAlgolia, useAlgoliaInsights, useAlgoliaSearch, useBreakpoint, useCartEvents, useCreateWishList, useDebouncedCallback, useDeleteCartLineById, useDeleteWishListItemFromWishList, useDisclosure, useFavorite, useFavoriteProduct, useFeatureFlags, useFetchAllWishListsItems, useFetchCurrentCartLines, useFetchTranslations, useFetchWishLists, useFormattedMessage, useGlobalSearchDisclosure, useGlobalState, useIsAuthenticated, useIsBreakpoint, useNavigate, useOnNavigate, useScrollLock, useSession, useSignIn, useSignOut, useUpdateCartLineById, userToken };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export interface IconButtonProps {
|
|
2
2
|
children: React.ReactNode;
|
|
3
3
|
className?: string;
|
|
4
|
-
color?: 'primary' | 'secondary';
|
|
4
|
+
color?: 'primary' | 'secondary' | 'current-color';
|
|
5
5
|
isDisabled?: boolean;
|
|
6
6
|
onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
|
|
7
7
|
size?: 'md' | 'lg';
|
package/dist/src/index.d.ts
CHANGED
|
@@ -62,6 +62,7 @@ export * from './lists/product-overview-grid/product-overview-grid';
|
|
|
62
62
|
export * from './loading/loading-overlay';
|
|
63
63
|
export * from './loading/progress-circle';
|
|
64
64
|
export * from './media/image/image';
|
|
65
|
+
export * from './notifications/announcements/announcement-provider';
|
|
65
66
|
export * from './pages/page-container/page-container';
|
|
66
67
|
export * from './pages/page/page';
|
|
67
68
|
export * from './pages/product-details-page/product-details-page';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function AnnouncementProvider(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { Announcement as AnnouncementType } from 'shared/model/announcement';
|
|
2
|
+
export interface AnnouncementProps {
|
|
3
|
+
announcement: AnnouncementType;
|
|
4
|
+
onDismiss?: (id: string) => void;
|
|
5
|
+
}
|
|
6
|
+
export declare function Announcement({ announcement: { href, id, text, title, type }, onDismiss, }: AnnouncementProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import type { StoryObj } from '@storybook/react';
|
|
2
|
+
import { Announcement } from './announcement';
|
|
3
|
+
declare const meta: {
|
|
4
|
+
component: typeof Announcement;
|
|
5
|
+
parameters: {
|
|
6
|
+
layout: string;
|
|
7
|
+
};
|
|
8
|
+
tags: string[];
|
|
9
|
+
title: string;
|
|
10
|
+
};
|
|
11
|
+
export default meta;
|
|
12
|
+
type Story = StoryObj<typeof meta>;
|
|
13
|
+
export declare const Promo: Story;
|
|
14
|
+
export declare const Informative: Story;
|
|
15
|
+
export declare const Notice: Story;
|
|
16
|
+
export declare const Critical: Story;
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { AnnouncementProps } from './announcement';
|
|
2
|
+
type ConnectedAnnouncementProps = AnnouncementProps;
|
|
3
|
+
export declare function ConnectedAnnouncement({ announcement: { endDate, startDate, ...announcement }, onDismiss, }: ConnectedAnnouncementProps): import("react/jsx-runtime").JSX.Element | null;
|
|
4
|
+
export {};
|
|
@@ -10,6 +10,6 @@ export interface Filters {
|
|
|
10
10
|
}
|
|
11
11
|
export interface ProductListingPageProps {
|
|
12
12
|
pageUrl: string;
|
|
13
|
-
searchClient
|
|
13
|
+
searchClient: SearchClient;
|
|
14
14
|
}
|
|
15
|
-
export declare function ProductListingPage({ pageUrl, searchClient
|
|
15
|
+
export declare function ProductListingPage({ pageUrl, searchClient, }: ProductListingPageProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { Announcement } from 'shared/model/announcement';
|
|
2
|
+
interface FetchAnnouncementsArgs {
|
|
3
|
+
languageCode: string;
|
|
4
|
+
}
|
|
5
|
+
export declare function useFetchAnnouncements({ languageCode, }: FetchAnnouncementsArgs): import("@tanstack/react-query").UseQueryResult<Announcement[], Error>;
|
|
6
|
+
export {};
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
declare const features: {
|
|
2
2
|
readonly pdp: "pdpV2";
|
|
3
|
-
readonly
|
|
4
|
-
readonly
|
|
3
|
+
readonly pdpv1: "pdpV1";
|
|
4
|
+
readonly plpv1: "plpV1";
|
|
5
|
+
readonly searchv1: "searchV1";
|
|
5
6
|
};
|
|
6
7
|
type FeatureKeys = keyof typeof features;
|
|
7
8
|
type FeatureValues = (typeof features)[FeatureKeys];
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export interface UpdateLocalStorage<T> {
|
|
2
|
+
(value: T): void;
|
|
3
|
+
(fn: (value: T) => T): void;
|
|
4
|
+
}
|
|
5
|
+
export declare function useLocalStorage<T>(key: string): [T | undefined, UpdateLocalStorage<T | undefined>];
|
|
6
|
+
export declare function useLocalStorage<T>(key: string, initialState: T): [T, UpdateLocalStorage<T>];
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
export declare const announcementTypes: readonly ["promo", "informative", "notice", "critical"];
|
|
2
|
+
type AnnouncementType = (typeof announcementTypes)[number];
|
|
3
|
+
export interface Announcement {
|
|
4
|
+
endDate?: Date;
|
|
5
|
+
href: string;
|
|
6
|
+
id: string;
|
|
7
|
+
startDate?: Date;
|
|
8
|
+
text: string;
|
|
9
|
+
title: string;
|
|
10
|
+
type: AnnouncementType;
|
|
11
|
+
}
|
|
12
|
+
export declare function isAnnouncementType(type: string): type is AnnouncementType;
|
|
13
|
+
export {};
|
package/dist/styles.css
CHANGED
|
@@ -225,6 +225,7 @@
|
|
|
225
225
|
--header-height-desktop: 96px;
|
|
226
226
|
--header-height-mobile: 54px;
|
|
227
227
|
--search-input-height: 76px;
|
|
228
|
+
--announcement-bar-height: 52px;
|
|
228
229
|
}
|
|
229
230
|
|
|
230
231
|
/* stylelint-disable no-descending-specificity */
|
|
@@ -529,6 +530,10 @@
|
|
|
529
530
|
color: var(--color-brand-dark-gray);
|
|
530
531
|
}
|
|
531
532
|
|
|
533
|
+
.icon-button-module-71HRy {
|
|
534
|
+
color: currentcolor;
|
|
535
|
+
}
|
|
536
|
+
|
|
532
537
|
.icon-button-module-fTeP4:where([data-hovered]), .icon-button-module-dM0eo:where([data-hovered]) {
|
|
533
538
|
color: var(--color-brand-red);
|
|
534
539
|
}
|
|
@@ -2123,6 +2128,140 @@
|
|
|
2123
2128
|
place-items: center;
|
|
2124
2129
|
}
|
|
2125
2130
|
|
|
2131
|
+
.announcement-module-Xi0L5 {
|
|
2132
|
+
--text-color: var(--color-white);
|
|
2133
|
+
--background-color: var(--color-brand-red);
|
|
2134
|
+
--icon-color: currentcolor;
|
|
2135
|
+
--border-color: var(--color-brand-red);
|
|
2136
|
+
}
|
|
2137
|
+
|
|
2138
|
+
.announcement-module-Xi0L5,
|
|
2139
|
+
.announcement-module-Xi0L5 * {
|
|
2140
|
+
box-sizing: border-box;
|
|
2141
|
+
}
|
|
2142
|
+
|
|
2143
|
+
.announcement-module-Xi0L5 {
|
|
2144
|
+
|
|
2145
|
+
position: relative;
|
|
2146
|
+
display: flex;
|
|
2147
|
+
min-height: var(--announcement-bar-height);
|
|
2148
|
+
padding: 13px 16px;
|
|
2149
|
+
border: 1px solid var(--border-color);
|
|
2150
|
+
background-color: var(--background-color);
|
|
2151
|
+
color: var(--text-color);
|
|
2152
|
+
}
|
|
2153
|
+
|
|
2154
|
+
.announcement-module-Xi0L5 .announcement-module-4XVjD {
|
|
2155
|
+
display: flex;
|
|
2156
|
+
align-items: center;
|
|
2157
|
+
padding-right: 56px;
|
|
2158
|
+
gap: 8px;
|
|
2159
|
+
}
|
|
2160
|
+
|
|
2161
|
+
.announcement-module-Xi0L5 .announcement-module-4XVjD .announcement-module-lxmA2 {
|
|
2162
|
+
color: var(--icon-color);
|
|
2163
|
+
}
|
|
2164
|
+
|
|
2165
|
+
.announcement-module-Xi0L5 .announcement-module-4XVjD .announcement-module-lxmA2 svg {
|
|
2166
|
+
display: block;
|
|
2167
|
+
}
|
|
2168
|
+
|
|
2169
|
+
.announcement-module-Xi0L5 .announcement-module-4XVjD .announcement-module-1Jn7y {
|
|
2170
|
+
display: flex;
|
|
2171
|
+
flex-direction: column;
|
|
2172
|
+
font-family: var(--font-family-sonic);
|
|
2173
|
+
font-size: var(--font-size-base);
|
|
2174
|
+
font-style: italic;
|
|
2175
|
+
}
|
|
2176
|
+
|
|
2177
|
+
.announcement-module-Xi0L5 .announcement-module-4XVjD .announcement-module-1Jn7y .announcement-module-8k2rK {
|
|
2178
|
+
margin: 0;
|
|
2179
|
+
font-size: var(--font-size-base);
|
|
2180
|
+
font-weight: var(--font-weight-bold);
|
|
2181
|
+
}
|
|
2182
|
+
|
|
2183
|
+
.announcement-module-Xi0L5 .announcement-module-4XVjD .announcement-module-1Jn7y .announcement-module-yXGsN {
|
|
2184
|
+
flex-wrap: nowrap;
|
|
2185
|
+
margin: 0;
|
|
2186
|
+
color: currentcolor;
|
|
2187
|
+
gap: 0;
|
|
2188
|
+
}
|
|
2189
|
+
|
|
2190
|
+
.announcement-module-Xi0L5 .announcement-module-gZ9ae {
|
|
2191
|
+
position: absolute;
|
|
2192
|
+
top: 50%;
|
|
2193
|
+
right: 0;
|
|
2194
|
+
transform: translateY(-50%);
|
|
2195
|
+
}
|
|
2196
|
+
|
|
2197
|
+
.announcement-module-Xi0L5:where(.announcement-module-0LTWL),
|
|
2198
|
+
.announcement-module-Xi0L5:where(.announcement-module-Ga3lN),
|
|
2199
|
+
.announcement-module-Xi0L5:where(.announcement-module-S3nSW) {
|
|
2200
|
+
--background-color: var(--color-white);
|
|
2201
|
+
--text-color: var(--color-brand-dark-gray);
|
|
2202
|
+
--border-color: var(--color-brand-light-gray);
|
|
2203
|
+
}
|
|
2204
|
+
|
|
2205
|
+
.announcement-module-Xi0L5:where(.announcement-module-0LTWL) {
|
|
2206
|
+
--icon-color: var(--color-semantic-information);
|
|
2207
|
+
}
|
|
2208
|
+
|
|
2209
|
+
.announcement-module-Xi0L5:where(.announcement-module-Ga3lN) {
|
|
2210
|
+
--icon-color: var(--color-semantic-notify);
|
|
2211
|
+
}
|
|
2212
|
+
|
|
2213
|
+
.announcement-module-Xi0L5:where(.announcement-module-S3nSW) {
|
|
2214
|
+
--icon-color: var(--color-semantic-stop);
|
|
2215
|
+
}
|
|
2216
|
+
|
|
2217
|
+
/* stylelint-disable-next-line no-descending-specificity */
|
|
2218
|
+
|
|
2219
|
+
.announcement-module-Xi0L5:hover .announcement-module-yXGsN {
|
|
2220
|
+
text-decoration: underline;
|
|
2221
|
+
}
|
|
2222
|
+
|
|
2223
|
+
.announcement-module-Xi0L5:hover:where(.announcement-module-E6DqW) {
|
|
2224
|
+
border-color: var(--color-brand-dark-red);
|
|
2225
|
+
background-color: var(--color-brand-dark-red);
|
|
2226
|
+
}
|
|
2227
|
+
|
|
2228
|
+
@media (width >= 576px) {
|
|
2229
|
+
.announcement-module-Xi0L5 {
|
|
2230
|
+
justify-content: center;
|
|
2231
|
+
}
|
|
2232
|
+
|
|
2233
|
+
.announcement-module-Xi0L5 .announcement-module-4XVjD {
|
|
2234
|
+
padding-right: 0;
|
|
2235
|
+
}
|
|
2236
|
+
|
|
2237
|
+
.announcement-module-Xi0L5 .announcement-module-4XVjD .announcement-module-1Jn7y {
|
|
2238
|
+
flex-direction: row;
|
|
2239
|
+
}
|
|
2240
|
+
.announcement-module-Xi0L5 .announcement-module-4XVjD .announcement-module-1Jn7y .announcement-module-8k2rK::after {
|
|
2241
|
+
content: '-';
|
|
2242
|
+
margin-inline: 4px;
|
|
2243
|
+
}
|
|
2244
|
+
}
|
|
2245
|
+
|
|
2246
|
+
.announcement-provider-module-ksjgO {
|
|
2247
|
+
margin-top: calc(-1 * var(--announcement-bar-height));
|
|
2248
|
+
}
|
|
2249
|
+
|
|
2250
|
+
.announcement-provider-module-k0zd- {
|
|
2251
|
+
margin-top: 0;
|
|
2252
|
+
transition: margin-top 300ms linear;
|
|
2253
|
+
}
|
|
2254
|
+
|
|
2255
|
+
.announcement-provider-module-w2N0B {
|
|
2256
|
+
z-index: -1;
|
|
2257
|
+
margin-top: 0;
|
|
2258
|
+
}
|
|
2259
|
+
|
|
2260
|
+
.announcement-provider-module-4lfx2 {
|
|
2261
|
+
margin-top: calc(-1 * var(--announcement-bar-height));
|
|
2262
|
+
transition: margin-top 300ms linear;
|
|
2263
|
+
}
|
|
2264
|
+
|
|
2126
2265
|
.page-container-module-PYmbC {
|
|
2127
2266
|
overflow: clip;
|
|
2128
2267
|
}
|
|
@@ -2794,7 +2933,7 @@ button.swiper-pagination-bullet {
|
|
|
2794
2933
|
|
|
2795
2934
|
.usp-carousel-module-UCbpX .usp-carousel-module-rtIrb .usp-carousel-module--Vdc3 {
|
|
2796
2935
|
width: var(--image-max-width);
|
|
2797
|
-
|
|
2936
|
+
height: calc(var(--image-max-width) * 509 / 555);
|
|
2798
2937
|
}
|
|
2799
2938
|
|
|
2800
2939
|
.usp-carousel-module-UCbpX .usp-carousel-module-rtIrb .usp-carousel-module--Vdc3 .usp-carousel-module-F-WAS {
|