Function PlusIOS

packages/shared/src/components/plus/PlusIOS.tsx:37–197

({
  shouldShowPlusHeader,
  showModalSection,
}: PlusIOSProps)

};

export const PlusIOS = ({
  shouldShowPlusHeader,
  showModalSection,
}: PlusIOSProps): ReactElement => {
  const router = useRouter();
  const { displayToast } = useToastNotification();
  const [selectedOption, setSelectedOption] = useState<string | null>(null);
  const { productOptions, openCheckout, isPlusAvailable } = usePaymentContext();
  const { isPlus, logSubscriptionEvent } = usePlusSubscription();
  const [isLoading, setIsLoading] = useState(false);
  const [listenForSuccess, setListenForSuccess] = useState(false);

  const { getMarketingCta } = useBoot();

  const { title, description, ctaText } = useMemo<
    Partial<MarketingCtaFlags>
  >(() => {
    if (!showModalSection) {
      return {};
    }
    const marketingCta = getMarketingCta(MarketingCtaVariant.Plus);
    const { flags } = marketingCta || {};
    return flags;
  }, [getMarketingCta, showModalSection]);

  const canContinue = useMemo(
    () =>
      iOSSupportsPlusPurchase() &&
      !!selectedOption &&
      !isPlus &&
      isPlusAvailable,
    [isPlus, isPlusAvailable, selectedOption],
  );

  const selectionChange: OpenCheckoutFn = useCallback(({ priceId }) => {
    setSelectedOption(priceId);
  }, []);

  const onContinue = useCallback(() => {
    // @DEPRECATED: Remove setListenForSuccess once usage of App v1.8 is low
    setListenForSuccess(true);
    logSubscriptionEvent({
      event_name: LogEvent.InitiateCheckout,
    });
    openCheckout({ priceId: selectedOption });
  }, [logSubscriptionEvent, openCheckout, selectedOption]);

  useEffect(() => {
    // @DEPRECATED: Remove event listener once usage of App v1.8 is low
    promisifyEventListener('iap-error', ({ detail }) => {
      if (detail === 'userCancelled') {
        setListenForSuccess(false);
        return;
      }

      displayToast(DEFAULT_ERROR);
    });