sentry/static/gsApp/components/productSelectionAvailability.tsx

import {useMemo} from 'react';

import Link from 'sentry/components/links/link';
import {ProductSolution} from 'sentry/components/onboarding/gettingStartedDoc/types';
import type {
  DisabledProducts,
  ProductSelectionProps,
} from 'sentry/components/onboarding/productSelection';
import {ProductSelection} from 'sentry/components/onboarding/productSelection';
import {t, tct} from 'sentry/locale';
import type {Organization} from 'sentry/types/organization';

import withSubscription from 'getsentry/components/withSubscription';
import {useAM2ProfilingUpsellModal} from 'getsentry/hooks/useAM2ProfilingUpsellModal';
import {useAM2UpsellModal} from 'getsentry/hooks/useAM2UpsellModal';
import type {Subscription} from 'getsentry/types';

import {
  makeLinkToManageSubscription,
  makeLinkToOwnersAndBillingMembers,
} from './profiling/alerts';

function getDisabledProducts({
  organization,
  canSelfServe,
  showSessionReplayModal,
  showProfilingModal,
}: {
  canSelfServe: boolean;
  organization: Organization;
  showProfilingModal: () => void;
  showSessionReplayModal: () => void;
}): DisabledProducts {
  const disabledProducts: DisabledProducts = {};
  const hasSessionReplay = organization.features.includes('session-replay');
  const hasPerformance = organization.features.includes('performance-view');
  const hasProfiling = organization.features.includes('profiling-view');
  const hasBillingAccess = organization.access?.includes('org:billing');

  // if performance is not available, it means that users are on a MM* plan and we don't have an upsell modal to show.
  const shouldShowUpsellModals = hasPerformance && hasBillingAccess && canSelfServe;

  if (!hasPerformance) {
    const reason = hasBillingAccess
      ? t("To use Performance, update your organization's plan to its latest version.")
      : t(
          'To use Performance, request an owner in your organization to update its plan to the latest version.'
        );

    disabledProducts[ProductSolution.PERFORMANCE_MONITORING] = {
      reason,
    };
  }

  if (!hasSessionReplay) {
    const reason = canSelfServe
      ? hasBillingAccess
        ? t(
            "To use Session Replay, update your organization's plan to its latest version."
          )
        : tct(
            'To use Session Replay, request an owner in your organization to update its plan to the latest version. [link:See who can upgrade]',
            {
              link: (
                <Link
                  to={makeLinkToOwnersAndBillingMembers(
                    organization,
                    'profiling_onboarding_product-selector'
                  )}
                />
              ),
            }
          )
      : tct(
          "To use Session Replay, update your organization's plan to its latest version. [link:Manage subscription]",
          {
            link: (
              <Link
                to={makeLinkToManageSubscription(
                  organization,
                  'profiling_onboarding_product-selector'
                )}
              />
            ),
          }
        );

    disabledProducts[ProductSolution.SESSION_REPLAY] = {
      reason,
      onClick: shouldShowUpsellModals ? showSessionReplayModal : undefined,
    };
  }

  if (!hasProfiling) {
    const reason = canSelfServe
      ? hasBillingAccess
        ? t("To use Profiling, update your organization's plan to its latest version.")
        : tct(
            'To use Profiling, request an owner in your organization to update its plan to the latest version. [link:See who can upgrade]',
            {
              link: (
                <Link
                  to={makeLinkToOwnersAndBillingMembers(
                    organization,
                    'profiling_onboarding_product-selector'
                  )}
                />
              ),
            }
          )
      : tct(
          "To use Profiling, update your organization's plan to its latest version. [link:Manage subscription]",
          {
            link: (
              <Link
                to={makeLinkToManageSubscription(
                  organization,
                  'profiling_onboarding_product-selector'
                )}
              />
            ),
          }
        );

    disabledProducts[ProductSolution.PROFILING] = {
      reason,
      onClick: shouldShowUpsellModals ? showProfilingModal : undefined,
    };
  }

  return disabledProducts;
}

type Props = {
  subscription: Subscription;
} & Omit<ProductSelectionProps, 'disabledProducts'>;

function ProductSelectionAvailabilityContainer({
  organization,
  subscription,
  platform,
  onChange,
  onLoad,
}: Props) {
  // Disable requests for session replay upsell modal if the organization already has session replay
  const hasSessionReplay = organization.features.includes('session-replay');
  const sessionReplayUpsellModal = useAM2UpsellModal({
    subscription,
    surface: 'profiling',
    onComplete: () => {
      window.location.reload();
    },
    enabled: !hasSessionReplay,
  });

  const profilingUpsellModal = useAM2ProfilingUpsellModal({
    subscription,
    onComplete: () => {
      window.location.reload();
    },
  });

  const disabledProducts: DisabledProducts = useMemo(
    () =>
      getDisabledProducts({
        organization,
        canSelfServe: subscription.canSelfServe,
        showSessionReplayModal: sessionReplayUpsellModal.showModal,
        showProfilingModal: profilingUpsellModal.showModal,
      }),
    [organization, subscription, sessionReplayUpsellModal, profilingUpsellModal]
  );

  return (
    <ProductSelection
      organization={organization}
      disabledProducts={disabledProducts}
      platform={platform}
      onChange={onChange}
      onLoad={onLoad}
    />
  );
}

export const ProductSelectionAvailability = withSubscription(
  ProductSelectionAvailabilityContainer
);