{"version":3,"file":"9134.b77d06a658711e8c5c2d.bundle.js","mappings":"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","sources":["webpack://webstaurantstore/./productListing/ProductBox/GoodBetterBestRibbon.tsx"],"sourcesContent":["import React, { useEffect, useState, CSSProperties } from \"react\";\nimport {\n  Popover,\n  PopoverBody,\n  PopoverHeader,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@clarkinc/zest-design-system/ui\";\nimport debounce from \"lodash/debounce\";\nimport { cls } from \"@wss/cls\";\nimport formatAsCurrency from \"@wss/utilities/formatAsCurrency\";\nimport Ribbon, { RibbonProps } from \"./Ribbon\";\nimport loaderGif from \"~/common/loader.gif\";\nimport {\n  QualityRatingItem,\n  QualityRatingMembership,\n} from \"~/common/Store/models/QualityRating\";\nimport { getLowestPriceWithQuantityDiscounts } from \"~/ProductDetails/Pricing/getLowestPrice\";\nimport shouldDisplayQuantityDiscounts from \"~/ProductDetails/Pricing/shouldDisplayQuantityDiscounts\";\nimport { User } from \"~/common/Store/models/User\";\n\nconst colors = {\n  Good: \"brown\",\n  Better: \"gray\",\n  Best: \"yellow\",\n} as const;\n\nexport type GoodBetterBestProps = {\n  itemNumber: string;\n  qualityRating: QualityRatingMembership;\n  productListingView?: \"list\" | \"grid\" | undefined;\n  showRibbonInline?: boolean;\n  className?: string;\n  style?: CSSProperties;\n  user: User;\n};\nconst GoodBetterBestRibbon = ({\n  itemNumber,\n  qualityRating,\n  productListingView,\n  showRibbonInline,\n  className,\n  style,\n  user,\n}: GoodBetterBestProps) => {\n  const { label } = qualityRating;\n  const [loadedQualityRatingGroup, setLoadedQualityRatingGroup] = useState(\n    false\n  );\n  const [qualityRatingGroup, setqualityRatingGroup] = useState<\n    QualityRatingItem[]\n  >([]);\n\n  const [isLargeScreen, setIsLargeScreen] = useState(true);\n\n  useEffect(() => {\n    if (!productListingView) {\n      return undefined;\n    }\n\n    const handleResize = debounce(() => {\n      setIsLargeScreen(window.innerWidth >= 768);\n    }, 100);\n\n    handleResize();\n    window.addEventListener(\"resize\", handleResize);\n    return () => {\n      window.removeEventListener(\"resize\", handleResize);\n    };\n  }, [productListingView]);\n\n  const loadQuantityRatingGroup = async () => {\n    if (loadedQualityRatingGroup) {\n      return;\n    }\n\n    const endpointUrl = \"/api/productlisting/qualityratinggroup/\";\n\n    try {\n      const result = await fetch(\n        `${endpointUrl}?itemNumber=${encodeURIComponent(itemNumber)}`\n      );\n\n      const data: QualityRatingItem[] = await result.json<\n        QualityRatingItem[]\n      >();\n\n      setqualityRatingGroup(data);\n    } catch (error) {\n      setqualityRatingGroup([]);\n    } finally {\n      setLoadedQualityRatingGroup(true);\n    }\n  };\n\n  const color: RibbonProps[\"bgcolor\"] = colors[label];\n\n  const getPriceDisplay = (item: QualityRatingItem) => {\n    const lowestPricingProduct = {\n      customizationRequired: false,\n      customizationUrl: \"\",\n      isCustomizable: false,\n      minimumCustomizationPrice: 0,\n      showBelowMinimumAdvertisedPriceForLoggedInCustomers:\n        item.showBelowMinimumAdvertisedPriceForLoggedInCustomers,\n      showBelowMinimumAdvertisedPriceForPlatinumAndPlusCustomers:\n        item.showBelowMinimumAdvertisedPriceForPlatinumAndPlusCustomers,\n      startBuy: item.startBuy,\n      price: item.price,\n    };\n\n    const [displayQuantityDiscounts] = shouldDisplayQuantityDiscounts(\n      lowestPricingProduct,\n      user\n    );\n\n    // eslint-disable-next-line no-extra-boolean-cast\n    if (\n      item.price.minimumAdvertisedPriceProperties?.type?.trim() &&\n      item.price.minimumAdvertisedPriceProperties.price < item.price.price\n    ) {\n      return <>View product for pricing details</>;\n    }\n\n    const displayPrice = getLowestPriceWithQuantityDiscounts(\n      lowestPricingProduct,\n      user,\n      false\n    );\n\n    if (displayQuantityDiscounts) {\n      return (\n        <div\n          data-testid=\"price\"\n          className=\"text-2xl price font-semibold leading-none mb-0 relative text-red-500 z-20\"\n        >\n          {formatAsCurrency.formatIfUndefined(item.price.price)}\n          <span\n            data-testid=\"each\"\n            className=\"each text-xs leading-none text-gray-800 \"\n          >\n            /{item.unitOfMeasure}\n          </span>\n        </div>\n      );\n    }\n\n    return (\n      <div\n        data-testid=\"price\"\n        className=\"font-semibold text-base md:text-xl text-left text-red-500\"\n      >\n        {formatAsCurrency.formatIfUndefined(displayPrice)}\n        <span\n          data-testid=\"each\"\n          className=\"each text-xs leading-none text-gray-800\"\n        >\n          /{item.unitOfMeasure}\n        </span>\n      </div>\n    );\n  };\n\n  const renderQualityRatingContent = () => {\n    if (!loadedQualityRatingGroup && qualityRatingGroup.length === 0) {\n      return (\n        <img\n          src={loaderGif}\n          alt=\"waiting\"\n          className={`loadingImage ${\"ml-12 mr-12 p-1-1/2\"}`}\n        />\n      );\n    }\n\n    if (loadedQualityRatingGroup && qualityRatingGroup.length === 0) {\n      return (\n        <p className=\"bg-orange-100 border-orange-200 rounded border-solid border font-semibold text-xs leading-none my-2 p-2\">\n          Quality Ratings are currently unavailable for this product.\n        </p>\n      );\n    }\n\n    return (\n      <div className=\"flex flex-col overflow-hidden\">\n        {qualityRatingGroup.map((item) => (\n          <div\n            className=\"border-gray-200 border-solid border-t-0 border-r-0 border-l-0 border-b last:border-b-0 box-border flex flex-wrap items-center overflow-hidden p-2 text-left w-full\"\n            key={item.itemNumber}\n          >\n            <div style={{ flex: \"0 0 auto\" }} className=\"float-left mr-2\">\n              <a href={item.link}>\n                <img\n                  className=\"w-16\"\n                  src={item.imagePath}\n                  alt={item.description}\n                />\n              </a>\n              {item.brand && item.brandLogo ? (\n                <img\n                  className=\"block w-16\"\n                  src={`${item.brandLogo}`}\n                  alt={item.brand}\n                />\n              ) : (\n                \"\"\n              )}\n            </div>\n\n            <div className=\"flex-1\">\n              <Ribbon\n                bgcolor={colors[item.label]}\n                className=\"inline-block hover:no-underline\"\n              >\n                {item.label}\n              </Ribbon>\n              <a\n                href={item.link}\n                className=\"block font-semibold text-sm leading-none mb-2 overflow-hidden\"\n              >\n                {item.description}\n              </a>\n              <p className=\"text-xs leading-3 my-0 mx-auto relative text-gray-800 uppercase\">\n                {item.itemNumber}\n              </p>\n              <div className=\"font-semibold text-base text-left text-red-500 my-2\">\n                {getPriceDisplay(item)}\n              </div>\n            </div>\n            <div className=\"text-xs leading-snug w-full\">\n              {item.ratingDescription}\n            </div>\n          </div>\n        ))}\n      </div>\n    );\n  };\n\n  return (\n    <Popover>\n      <PopoverTrigger\n        aria-label={`compare this ${qualityRating.label} ranked product to others`}\n        onClick={loadQuantityRatingGroup}\n        className={`border-none bg-transparent relative -left-1.5 align-middle ${\n          productListingView === \"list\" ? \"float-left -top-px\" : \"-top-[7px]\"\n        } ${className}`}\n        key={qualityRating.groupId}\n      >\n        <Ribbon\n          bgcolor={color}\n          data-testid=\"goodBetterBestRibbon\"\n          data-gbb-guid={qualityRating.guid}\n          data-gbb-orderby=\"1\"\n          className={cls(\n            className,\n            \"outline-offset-2\",\n            showRibbonInline ? \"inline-block\" : \"table\",\n            productListingView === \"list\"\n              ? \"mr-1 mb-1-1/2\"\n              : \"mr-2-1/2 -ml-1-1/2 pt-[5px]\"\n          )}\n          style={style}\n          squareLeftSide={productListingView === \"grid\"}\n        >\n          {qualityRating.label}\n        </Ribbon>\n      </PopoverTrigger>\n      <PopoverContent\n        placement={isLargeScreen ? \"left\" : \"bottom\"}\n        className={productListingView !== undefined ? \"z-[60]\" : \"z-30\"}\n        avoidCollisions={productListingView !== undefined}\n      >\n        <PopoverHeader>Quality Rating</PopoverHeader>\n        <PopoverBody>{renderQualityRatingContent()}</PopoverBody>\n      </PopoverContent>\n    </Popover>\n  );\n};\n\nexport default GoodBetterBestRibbon;\n"],"names":["colors","Good","Better","Best","itemNumber","qualityRating","productListingView","showRibbonInline","className","style","user","label","useState","loadedQualityRatingGroup","setLoadedQualityRatingGroup","qualityRatingGroup","setqualityRatingGroup","isLargeScreen","setIsLargeScreen","useEffect","handleResize","debounce","window","innerWidth","addEventListener","removeEventListener","loadQuantityRatingGroup","endpointUrl","data","fetch","encodeURIComponent","json","error","color","getPriceDisplay","item","lowestPricingProduct","customizationRequired","customizationUrl","isCustomizable","minimumCustomizationPrice","showBelowMinimumAdvertisedPriceForLoggedInCustomers","showBelowMinimumAdvertisedPriceForPlatinumAndPlusCustomers","startBuy","price","displayQuantityDiscounts","shouldDisplayQuantityDiscounts","minimumAdvertisedPriceProperties","type","trim","displayPrice","getLowestPriceWithQuantityDiscounts","div","data-testid","formatAsCurrency","formatIfUndefined","span","unitOfMeasure","Popover","PopoverTrigger","aria-label","onClick","Ribbon","bgcolor","data-gbb-guid","guid","data-gbb-orderby","cls","squareLeftSide","groupId","PopoverContent","placement","undefined","avoidCollisions","PopoverHeader","PopoverBody","length","p","map","flex","a","href","link","img","src","imagePath","alt","description","brand","brandLogo","ratingDescription","loaderGif"],"sourceRoot":""}