Function PlusInfo

packages/shared/src/components/plus/PlusInfo.tsx:132–332

({
  productOptions,
  selectedOption,
  onChange,
  onContinue,
  shouldShowPlusHeader = true,
  showPlusList = true,
  showDailyDevLogo = false,
  showGiftButton = true,
  showTrustReviews = true,
  title,
  description,
  subtitle,
  continueEnabled = true,
  isContinueLoading = false,
}: PlusInfoProps & CommonPlusPageProps)

};

export const PlusInfo = ({
  productOptions,
  selectedOption,
  onChange,
  onContinue,
  shouldShowPlusHeader = true,
  showPlusList = true,
  showDailyDevLogo = false,
  showGiftButton = true,
  showTrustReviews = true,
  title,
  description,
  subtitle,
  continueEnabled = true,
  isContinueLoading = false,
}: PlusInfoProps & CommonPlusPageProps): ReactElement => {
  const router = useRouter();
  const { giftOneYear, isOrganization, checkoutItemsLoading } =
    usePaymentContext();
  const { openModal } = useLazyModal();
  const { isPlus, logSubscriptionEvent } = usePlusSubscription();
  const { giftToUser } = useGiftUserContext();

  const [itemQuantity, setItemQuantity] = useState<number>(1);

  const { value: isApiLanding } = useConditionalFeature({
    feature: featurePlusApiLanding,
    shouldEvaluate: !isPlus,
  });

  const plusType = getPlusType({
    isGift: !!giftToUser,
    isOrganization,
  });
  const copySource = isApiLanding
    ? plusInfoCopyApi
    : defaultPlusInfoCopyControl;
  const defaultCopy = copySource[plusType];
  const titleCopy = title || defaultCopy.title;
  const descriptionCopy = description || defaultCopy.description;
  const subtitleCopy = subtitle || defaultCopy.subtitle;

  const isOnboarding = router.pathname.startsWith('/onboarding');
  const showBuyAsAGiftButton =
    !giftToUser && showGiftButton && !!giftOneYear && !isOnboarding;
  let plusListContent: ReactElement;
  if (isOrganization) {
    plusListContent = <PlusList items={plusOrganizationFeatureList} />;
  } else if (isApiLanding && plusType === PlusType.Self) {
    plusListContent = <PlusList items={plusFeatureListApiFirst} />;
  } else {
    plusListContent = <PlusList />;
  }

  return (
    <>
      {shouldShowPlusHeader && (
        <div className="mb-6 flex items-center">