desktop: constructHrefWithUtm()

in libs/payments/ui/src/lib/client/components/Header/index.tsx [102:209]
105 lines of code
2 McCabe index (conditional complexity)

    desktop: constructHrefWithUtm(
      OFFERING_LINKS.desktop,
      'mozilla-websites',
      'moz-subplat',
      'bento',
      'fx-desktop',
      'permanent'
    ),
    mobile: constructHrefWithUtm(
      OFFERING_LINKS.mobile,
      'mozilla-websites',
      'moz-subplat',
      'bento',
      'fx-mobile',
      'permanent'
    ),
    monitor: constructHrefWithUtm(
      OFFERING_LINKS.monitor,
      'mozilla-websites',
      'moz-subplat',
      'bento',
      'monitor',
      'permanent'
    ),
    relay: constructHrefWithUtm(
      OFFERING_LINKS.relay,
      'mozilla-websites',
      'moz-subplat',
      'bento',
      'relay',
      'permanent'
    ),
    vpn: constructHrefWithUtm(
      OFFERING_LINKS.vpn,
      'mozilla-websites',
      'moz-subplat',
      'bento',
      'vpn',
      'permanent'
    ),
    pocket: OFFERING_LINKS.pocket,
  };

  const iconClassNames = 'inline-block w-5 -mb-1 me-1';

  return (
    <header
      className="bg-white fixed flex justify-between items-center shadow h-16 left-0 top-0 mx-auto my-0 px-4 py-0 w-full z-40 tablet:h-20"
      role="banner"
    >
      <div className="flex items-center">
        <Image
          src={mozillaIcon}
          alt="Mozilla logo"
          className="object-contain"
          width={140}
        />
      </div>
      <div className="flex items-center leading-normal">
        <Localized id="payments-header-help" attrs={{ title: true }}>
          <LinkExternal
            href="https://support.mozilla.org/products/mozilla-account"
            title="Help"
            className="inline-block relative p-2 -m-2 z-[1] rounded hover:bg-grey-100"
          >
            <Localized
              id="payments-header-help"
              attrs={{ alt: true, 'aria-label': true }}
            >
              <Image
                src={helpIcon}
                aria-label="Help"
                alt="Help"
                role="img"
                className="w-5 text-violet-900"
              />
            </Localized>
          </LinkExternal>
        </Localized>
        {/** Bento Menu, TODO: convert to Radix Primitive as part of FXA-11035 */}
        <div
          className="relative self-center flex mx-2"
          ref={bentoMenuInsideRef}
        >
          <Localized id="payments-header-bento" attrs={{ title: true }}>
            <button
              onClick={toggleBentoMenuRevealed}
              title="Mozilla products"
              aria-label="Mozilla products"
              aria-expanded={!!isBentoMenuRevealed}
              aria-haspopup="menu"
              className="rounded p-2 mx-2 border-transparent hover:bg-grey-100 transition-standard desktop:mx-8"
            >
              <Localized
                id="payments-header-bento"
                attrs={{ alt: true, 'aria-label': true }}
              >
                <Image
                  src={bentoIcon}
                  alt="Mozilla Logo"
                  className="w-5 text-violet-900"
                />
              </Localized>
            </button>
          </Localized>

          {/** Bento Dropdown */}
          {isBentoMenuRevealed && (