{"version":3,"file":"Accessories.7e387a514d2f8d55d407.chunk.js","mappings":"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","sources":["webpack://nushopweb/./packages/client/src/components/ClientRedirect/index.tsx","webpack://nushopweb/./packages/client/src/containers/ProductDetailContainer/ProductDetail/ProductBaseInfo/Accessories/messages.ts","webpack://nushopweb/./packages/client/src/containers/ProductDetailContainer/ProductDetail/ProductBaseInfo/Accessories/styled.ts","webpack://nushopweb/./packages/client/src/containers/ProductDetailContainer/ProductDetail/ProductBaseInfo/Accessories/components/ShowOtherVariants.tsx","webpack://nushopweb/./packages/client/src/containers/ProductDetailContainer/ProductDetail/ProductBaseInfo/Accessories/components/Unavailable.tsx","webpack://nushopweb/./packages/client/src/containers/ProductDetailContainer/ProductDetail/ProductBaseInfo/Accessories/AccessoriesContent.tsx","webpack://nushopweb/./packages/client/src/containers/ProductDetailContainer/ProductDetail/ProductBaseInfo/Accessories/Accessories.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Link } from 'react-router-dom';\n\nimport { ReactFCC } from '@notino/react-styleguide';\nimport { masterUrl } from '@notino/shared/client-utils';\n\nimport { useModifyCacheAndChangePathname } from './useHandleClientRedirect';\n\nexport interface IClientRedirectProps {\n  product: {\n    url: string;\n    id: string | number;\n    masterId: string | number;\n    catalogMasterId: string | number;\n  };\n  useMasterUrl: boolean;\n}\n\nexport const ClientRedirect: ReactFCC<IClientRedirectProps> = ({\n  children,\n  useMasterUrl,\n  product,\n}) => {\n  const modifyCacheAndChangePathname = useModifyCacheAndChangePathname();\n\n  const handleOnClick = () => {\n    modifyCacheAndChangePathname(product);\n  };\n\n  return (\n    <Link\n      to={useMasterUrl ? masterUrl(product.url) : product.url}\n      onClick={handleOnClick}\n    >\n      {children}\n    </Link>\n  );\n};\n","import { defineMessages } from 'react-intl';\n\nexport const accessoriesMessages = defineMessages({\n  accessoriesPopupBoxText: {\n    id: 'pd.accessories.popupBox',\n    defaultMessage:\n      'Tento produkt má příslušentví, které se vám bude hodit ({count})',\n  },\n  accessoriesContentTitle: {\n    id: 'pd.accessories.content.title',\n    defaultMessage: 'Příslušenství pro {productName} ({count})',\n  },\n  accessoriesShowOtherVariants: {\n    id: 'pd.accessories.show.other.variants',\n    defaultMessage: 'Zobrazit varianty',\n  },\n});\n","import styled, { css } from 'styled-components';\n\nimport {\n  breakpoints,\n  ProductSliderPlaceholder,\n  theme,\n} from '@notino/react-styleguide';\n\nexport const Title = styled.div`\n  ${theme.typography.titleLarge}\n  text-align: center;\n`;\n\nexport const StyledLoadingPlaceholder = styled(ProductSliderPlaceholder)<{\n  center: boolean;\n}>`\n  margin: 1.25rem 0 2.25rem;\n\n  @media (min-width: ${breakpoints.md}) {\n    margin: 2.25rem 0 2rem;\n  }\n\n  ${({ center }) =>\n    center &&\n    css`\n      justify-content: center;\n    `}\n`;\n\nexport const SliderWrapper = styled.div<{ centerSlider: boolean }>`\n  margin: 1.25rem 0 0.25rem;\n\n  [data-testid='phone-slider'] {\n    padding: 0 1.25rem 2rem;\n\n    ${({ centerSlider }) =>\n      centerSlider &&\n      css`\n        justify-content: center;\n      `}\n  }\n\n  @media (min-width: ${breakpoints.md}) {\n    margin: 2.25rem 0 2rem;\n\n    ${({ centerSlider }) =>\n      centerSlider &&\n      css`\n        [data-testid='desktop-slider'] > div {\n          justify-content: center;\n        }\n      `}\n  }\n`;\n\nexport const UnavailableWrapper = styled.p`\n  ${theme.typography.labelSmall};\n  color: ${theme.color.text.highlight};\n  margin-top: 1rem;\n`;\n\nexport const OtherVariantsWrapper = styled.div`\n  display: block;\n  color: ${theme.color.text.primary};\n  ${theme.typography.labelRegular};\n  margin-top: 1.5rem;\n`;\n","import * as React from 'react';\nimport { FormattedMessage } from 'react-intl';\n\nimport {\n  ClientRedirect,\n  IClientRedirectProps,\n} from '@components/ClientRedirect';\n\nimport { accessoriesMessages } from '../messages';\nimport { OtherVariantsWrapper } from '../styled';\n\ninterface ShowOtherVariantsLinkProps {\n  product: IClientRedirectProps['product'];\n}\n\nexport const ShowOtherVariantsLink: React.FC<ShowOtherVariantsLinkProps> = ({\n  product,\n}) => {\n  return (\n    <ClientRedirect useMasterUrl={true} product={product}>\n      <OtherVariantsWrapper>\n        <FormattedMessage\n          {...accessoriesMessages.accessoriesShowOtherVariants}\n        />\n      </OtherVariantsWrapper>\n    </ClientRedirect>\n  );\n};\n","import * as React from 'react';\nimport { FormattedMessage } from 'react-intl';\n\nimport { messages } from '../../Variants/VariantsTile/messages';\nimport { UnavailableWrapper } from '../styled';\n\nexport const Unavailable = () => {\n  return (\n    <UnavailableWrapper>\n      <FormattedMessage {...messages.unavailable} />\n    </UnavailableWrapper>\n  );\n};\n","import * as React from 'react';\n\nimport {\n  GetCatalogProductViewQuery,\n  ProductIdType,\n  StockAvailability,\n} from '@notino/shared/definitions/types';\n\nimport { ProductSlider } from '@components/ProductSlider';\nimport { useGetProductItemProps } from '@components/Universals/ProductItem/useGetProductItemProps';\n\nimport { useProductsByIdsBatched } from '../../ProductsSection/useProductsByIdsBatched';\n\nimport { ShowOtherVariantsLink } from './components/ShowOtherVariants';\nimport { Unavailable } from './components/Unavailable';\nimport { SliderWrapper, StyledLoadingPlaceholder } from './styled';\n\nconst ITEMS_PER_SLIDE = 3;\n\ntype AccessoriesContentProps = {\n  accessories: GetCatalogProductViewQuery['productDetailByCatalogMasterId']['features']['accessories'];\n};\n\nexport const AccessoriesContent: React.FC<AccessoriesContentProps> = ({\n  accessories,\n}) => {\n  const catalogIds = accessories.products.map(\n    (product) => `${product.catalogId}`\n  );\n\n  const { data, loading } = useProductsByIdsBatched(catalogIds, {\n    idType: ProductIdType.Catalog,\n  });\n\n  const placeholderCount = Math.min(\n    accessories.products.length,\n    ITEMS_PER_SLIDE\n  );\n  const centerPlaceholder = placeholderCount < ITEMS_PER_SLIDE;\n\n  const getProductItemProps = useGetProductItemProps({\n    noPriceIfUnavailable: false,\n    useMasterUrl: true,\n    inSectionOfType: 'slider',\n    wishlistActionLocation: 'list',\n    showBuyButton: true,\n    showAddToCartModal: false,\n  });\n\n  const products =\n    data?.vpProductByIds\n      .map((product, index) => {\n        const isOutOfStock =\n          product.stockAvailability.code.toLocaleLowerCase() ===\n          StockAvailability.OutOfStock.toLocaleLowerCase();\n\n        const hasOtherVariants = product.attributes?.HasOtherVariants;\n\n        const unavailable = isOutOfStock && <Unavailable />;\n\n        const otherVariants = hasOtherVariants && (\n          <ShowOtherVariantsLink product={product} />\n        );\n\n        const appendComponent = unavailable || otherVariants;\n\n        return getProductItemProps({\n          product,\n          position: index + 1,\n          appendComponent,\n          shouldHideItemBuyButton: hasOtherVariants,\n        });\n      })\n      .filter(Boolean) ?? [];\n\n  return (\n    <div>\n      {!data || loading ? (\n        <StyledLoadingPlaceholder\n          placeholderCount={placeholderCount}\n          rows={5}\n          center={centerPlaceholder}\n        />\n      ) : (\n        <SliderWrapper centerSlider={products.length < ITEMS_PER_SLIDE}>\n          <ProductSlider\n            itemsPerSlide={ITEMS_PER_SLIDE}\n            products={products ?? []}\n            inViewThreshold={1}\n            fallback={\n              <StyledLoadingPlaceholder\n                placeholderCount={placeholderCount}\n                rows={4}\n                center={centerPlaceholder}\n              />\n            }\n          />\n        </SliderWrapper>\n      )}\n    </div>\n  );\n};\n","import * as React from 'react';\nimport { FormattedMessage } from 'react-intl';\n\nimport { ModalContext, ModalModel } from '@notino/react-styleguide';\n\nimport { useDrawer } from '@components/BottomSheet/DrawerProvider';\nimport { isDesktop } from '@utils/helpers';\n\nimport { PopupBox } from '../../../../../components/PopupBox';\nimport { useProductDetailContext } from '../../ProductDetailContext';\n\nimport { AccessoriesContent } from './AccessoriesContent';\nimport { accessoriesMessages } from './messages';\nimport { Title } from './styled';\n\nconst Accessories = () => {\n  const {\n    currentVariant: {\n      media: {\n        mainImage: { alt, src },\n      },\n    },\n    product: {\n      collection,\n      brand: { name },\n      features: { accessories },\n    },\n  } = useProductDetailContext();\n\n  const { toggleModal } = ModalContext.useModalContext();\n  const { toggleDrawer } = useDrawer();\n\n  const accessoryCount = accessories.products.length;\n\n  const openModalOrDrawer = () => {\n    const productName = `${name} ${collection}`;\n    const header = (\n      <Title>\n        <FormattedMessage\n          {...accessoriesMessages.accessoriesContentTitle}\n          values={{ productName, count: accessoryCount }}\n        />\n      </Title>\n    );\n\n    if (isDesktop()) {\n      toggleModal(<AccessoriesContent accessories={accessories} />, {\n        header,\n        size: ModalModel.Sizes.large,\n      });\n      return;\n    }\n\n    toggleDrawer(<AccessoriesContent accessories={accessories} />, {\n      header,\n      ...(accessoryCount >= 3 && { ignoreBodySwipe: true }),\n    });\n  };\n\n  return (\n    <PopupBox\n      dataTestId=\"accessories-wrapper\"\n      cdnImageUrl={src}\n      imageAlt={alt}\n      onClick={openModalOrDrawer}\n    >\n      <FormattedMessage\n        {...accessoriesMessages.accessoriesPopupBoxText}\n        values={{ count: accessoryCount }}\n      />\n    </PopupBox>\n  );\n};\n\nexport default Accessories;\n"],"names":["ClientRedirect","_ref","children","useMasterUrl","product","modifyCacheAndChangePathname","useModifyCacheAndChangePathname","React","Link","to","masterUrl","url","onClick","handleOnClick","accessoriesMessages","defineMessages","accessoriesPopupBoxText","id","accessoriesContentTitle","accessoriesShowOtherVariants","Title","styled","componentId","theme","StyledLoadingPlaceholder","ProductSliderPlaceholder","withConfig","breakpoints","center","css","SliderWrapper","_ref2","centerSlider","_ref3","UnavailableWrapper","OtherVariantsWrapper","ShowOtherVariantsLink","FormattedMessage","Unavailable","messages","AccessoriesContent","accessories","catalogIds","products","map","catalogId","data","loading","useProductsByIdsBatched","idType","ProductIdType","placeholderCount","Math","min","length","centerPlaceholder","getProductItemProps","useGetProductItemProps","noPriceIfUnavailable","inSectionOfType","wishlistActionLocation","showBuyButton","showAddToCartModal","vpProductByIds","index","isOutOfStock","stockAvailability","code","toLocaleLowerCase","StockAvailability","hasOtherVariants","attributes","HasOtherVariants","position","appendComponent","shouldHideItemBuyButton","filter","Boolean","rows","ProductSlider","itemsPerSlide","inViewThreshold","fallback","Accessories","currentVariant","media","mainImage","alt","src","collection","brand","name","features","useProductDetailContext","toggleModal","ModalContext","toggleDrawer","useDrawer","accessoryCount","PopupBox","dataTestId","cdnImageUrl","imageAlt","openModalOrDrawer","productName","header","_extends","values","count","isDesktop","size","ModalModel","ignoreBodySwipe"],"sourceRoot":""}