fix: clear checkout if plus becomes unavailable

packages/shared/src/components/plus/PlusCheckoutContainer.tsx

@@ -1,27 +1,51 @@
 import type { ReactElement } from 'react';
 import React from 'react';
 
+import classNames from 'classnames';
 import { usePaymentContext } from '../../contexts/PaymentContext';
 import { usePlusSubscription } from '../../hooks';
 import { PlusUnavailable } from './PlusUnavailable';
 import { PlusPlus } from './PlusPlus';
-import type { WithClassNameProps } from '../utilities/common';
 
-export type PlusCheckoutContainerProps = WithClassNameProps;
+export type PlusCheckoutContainerProps = {
+  checkoutRef?: React.LegacyRef<HTMLDivElement>;
+  className?: {
+    container?: string;
+    element?: string;
+  };
+};
 
 export const PlusCheckoutContainer = ({
+  checkoutRef,
   className,
 }: PlusCheckoutContainerProps): ReactElement => {
   const { isPlusAvailable } = usePaymentContext();
   const { isPlus } = usePlusSubscription();
 
-  if (!isPlusAvailable) {
-    return <PlusUnavailable className={className} />;
-  }
+  const getContainerElement = () => {
+    if (!isPlusAvailable) {
+      return PlusUnavailable;
+    }
+
+    if (isPlus) {
+      return PlusPlus;
+    }
+
+    return null;
+  };
 
-  if (isPlus) {
-    return <PlusPlus className={className} />;
-  }
+  const ContainerElement = getContainerElement();
+  const shouldRenderCheckout = !ContainerElement;
 
-  return null;
+  return (
+    <div
+      ref={shouldRenderCheckout ? checkoutRef : undefined}
+      className={classNames(
+        shouldRenderCheckout && 'checkout-container',
+        className?.container,
+      )}
+    >
+      {ContainerElement && <ContainerElement className={className?.element} />}
+    </div>
+  );
 };

packages/shared/src/components/plus/PlusDesktop.tsx

@@ -50,12 +50,14 @@ export const PlusDesktop = (): ReactElement => {
           onChange={toggleCheckoutOption}
         />
       </div>
-      <div
-        ref={ref}
-        className="checkout-container min-h-40 w-[28.5rem] rounded-16 border border-border-subtlest-tertiary bg-background-default p-5"
-      >
-        <PlusCheckoutContainer className="h-[35rem]" />
-      </div>
+      <PlusCheckoutContainer
+        checkoutRef={ref}
+        className={{
+          container:
+            'min-h-40 w-[28.5rem] rounded-16 border border-border-subtlest-tertiary bg-background-default p-5',
+          element: 'h-[35rem]',
+        }}
+      />
     </div>
   );
 };

packages/webapp/pages/plus/payment.tsx

@@ -29,18 +29,19 @@ const PlusPaymentPage = (): ReactElement => {
     <>
       <NextSeo nofollow noindex />
       <div className="flex flex-1 justify-center bg-background-default">
-        <div
-          ref={(element) => {
+        <PlusCheckoutContainer
+          checkoutRef={(element) => {
             if (!element) {
               return;
             }
 
             openCheckout({ priceId: pid as string });
           }}
-          className="checkout-container h-full w-full bg-background-default p-5"
-        >
-          <PlusCheckoutContainer className="h-full" />
-        </div>
+          className={{
+            container: 'h-full w-full bg-background-default p-5',
+            element: 'h-full',
+          }}
+        />
       </div>
     </>
   );