fix(sdk): check payment method before plan upgrade and downgrade (#530)

* chore: move payment method to frontier context

* fix: check for payment method in plan change

* fix: flicker in plan list loading state

* chore: check for plan pricing for checkout

Author: rsbh

sdks/js/packages/core/react/components/organization/billing/index.tsx

@@ -142,16 +142,16 @@ const PaymentMethod = ({
 
 export default function Billing() {
   const {
-    billingAccount: activeBillingAccount,
+    billingAccount,
+    isBillingAccountLoading,
     client,
     config,
     activeSubscription,
-    isActiveSubscriptionLoading
+    isActiveSubscriptionLoading,
+    paymentMethod
   } = useFrontier();
   const navigate = useNavigate({ from: '/billing' });
-  const [billingAccount, setBillingAccount] = useState<V1Beta1BillingAccount>();
-  const [paymentMethod, setPaymentMethod] = useState<V1Beta1PaymentMethod>();
-  const [isBillingAccountLoading, setBillingAccountLoading] = useState(false);
+
   const [invoices, setInvoices] = useState<V1Beta1Invoice[]>([]);
   const [isInvoicesLoading, setIsInvoicesLoading] = useState(false);
 
@@ -175,39 +175,10 @@ export default function Billing() {
   );
 
   useEffect(() => {
-    async function getPaymentMethod(orgId: string, billingId: string) {
-      setBillingAccountLoading(true);
-      try {
-        const resp = await client?.frontierServiceGetBillingAccount(
-          orgId,
-          billingId,
-          { with_payment_methods: true }
-        );
-        if (resp?.data) {
-          const paymentMethods = resp?.data?.payment_methods || [];
-          setBillingAccount(resp.data.billing_account);
-          setPaymentMethod(paymentMethods[0]);
-        }
-      } catch (err: any) {
-        toast.error('Something went wrong', {
-          description: err.message
-        });
-        console.error(err);
-      } finally {
-        setBillingAccountLoading(false);
-      }
-    }
-
-    if (activeBillingAccount?.id && activeBillingAccount?.org_id) {
-      getPaymentMethod(activeBillingAccount?.org_id, activeBillingAccount?.id);
-      fetchInvoices(activeBillingAccount?.org_id, activeBillingAccount?.id);
+    if (billingAccount?.id && billingAccount?.org_id) {
+      fetchInvoices(billingAccount?.org_id, billingAccount?.id);
     }
-  }, [
-    activeBillingAccount?.id,
-    activeBillingAccount?.org_id,
-    client,
-    fetchInvoices
-  ]);
+  }, [billingAccount?.id, billingAccount?.org_id, client, fetchInvoices]);
 
   const onAddDetailsClick = useCallback(() => {
     if (billingAccount?.id) {
@@ -248,7 +219,7 @@ export default function Billing() {
               isLoading={isLoading}
             />
             <BillingDetails
-              billingAccount={activeBillingAccount}
+              billingAccount={billingAccount}
               onAddDetailsClick={onAddDetailsClick}
               isLoading={isLoading}
             />

sdks/js/packages/core/react/components/organization/plans/index.tsx

@@ -96,7 +96,7 @@ const PlanPricingColumn = ({
   currentPlan?: IntervalPricingWithPlan;
   allowAction: boolean;
 }) => {
-  const { config } = useFrontier();
+  const { config, paymentMethod } = useFrontier();
 
   const navigate = useNavigate({ from: '/plans' });
 
@@ -144,16 +144,18 @@ const PlanPricingColumn = ({
   }, [currentPlan, selectedIntervalPricing]);
 
   const isAlreadySubscribed = !_.isEmpty(currentPlan);
+  const isCheckoutRequired =
+    _.isEmpty(paymentMethod) && selectedIntervalPricing.amount > 0;
 
   const onPlanActionClick = useCallback(() => {
-    if (action?.showModal) {
+    if (action?.showModal && !isCheckoutRequired) {
       navigate({
         to: '/plans/confirm-change/$planId',
         params: {
           planId: selectedIntervalPricing?.planId
         }
       });
-    } else if (isAlreadySubscribed) {
+    } else if (isAlreadySubscribed && !isCheckoutRequired) {
       const planId = selectedIntervalPricing?.planId;
       changePlan({
         planId,
@@ -184,6 +186,7 @@ const PlanPricingColumn = ({
     action?.immediate,
     action?.btnLabel,
     isAlreadySubscribed,
+    isCheckoutRequired,
     navigate,
     selectedIntervalPricing?.planId,
     changePlan,
@@ -378,8 +381,14 @@ const PlansList = ({
 };
 
 export default function Plans() {
-  const { config, client, activeSubscription, activeOrganization } =
-    useFrontier();
+  const {
+    config,
+    client,
+    activeSubscription,
+    activeOrganization,
+    isActiveSubscriptionLoading,
+    isActiveOrganizationLoading
+  } = useFrontier();
   const [isPlansLoading, setIsPlansLoading] = useState(false);
   const [plans, setPlans] = useState<V1Beta1Plan[]>([]);
   const [features, setFeatures] = useState<V1Beta1Feature[]>([]);
@@ -436,7 +445,11 @@ export default function Plans() {
     getPlansAndFeatures();
   }, [client]);
 
-  const isLoading = isPlansLoading || isPermissionsFetching;
+  const isLoading =
+    isPlansLoading ||
+    isPermissionsFetching ||
+    isActiveSubscriptionLoading ||
+    isActiveOrganizationLoading;
 
   return (
     <Flex direction="column" style={{ width: '100%', overflow: 'hidden' }}>

sdks/js/packages/core/react/contexts/FrontierContext.tsx

@@ -19,6 +19,7 @@ import {
   V1Beta1BillingAccount,
   V1Beta1Group,
   V1Beta1Organization,
+  V1Beta1PaymentMethod,
   V1Beta1Plan,
   V1Beta1Subscription,
   V1Beta1User
@@ -76,6 +77,8 @@ interface FrontierContextProviderProps {
   setIsActivePlanLoading: Dispatch<SetStateAction<boolean>>;
 
   fetchActiveSubsciption: () => Promise<V1Beta1Subscription | undefined>;
+
+  paymentMethod: V1Beta1PaymentMethod | undefined;
 }
 
 const defaultConfig: FrontierClientOptions = {
@@ -134,7 +137,9 @@ const initialValues: FrontierContextProviderProps = {
   isActivePlanLoading: false,
   setIsActivePlanLoading: () => false,
 
-  fetchActiveSubsciption: async () => undefined
+  fetchActiveSubsciption: async () => undefined,
+
+  paymentMethod: undefined
 };
 
 export const FrontierContext =
@@ -160,6 +165,7 @@ export const FrontierContextProvider = ({
   const [isUserLoading, setIsUserLoading] = useState(false);
 
   const [billingAccount, setBillingAccount] = useState<V1Beta1BillingAccount>();
+  const [paymentMethod, setPaymentMethod] = useState<V1Beta1PaymentMethod>();
   const [isBillingAccountLoading, setIsBillingAccountLoading] = useState(false);
 
   const [isActiveSubscriptionLoading, setIsActiveSubscriptionLoading] =
@@ -297,10 +303,22 @@ export const FrontierContextProvider = ({
         const {
           data: { billing_accounts = [] }
         } = await frontierClient.frontierServiceListBillingAccounts(orgId);
-        if (billing_accounts.length > 0) {
-          const billing_account = billing_accounts[0];
-          setBillingAccount(billing_account);
-          await getSubscription(orgId, billing_account?.id || '');
+        const billingAccountId = billing_accounts[0]?.id || '';
+        if (billingAccountId) {
+          const [resp] = await Promise.all([
+            frontierClient?.frontierServiceGetBillingAccount(
+              orgId,
+              billingAccountId,
+              { with_payment_methods: true }
+            ),
+            getSubscription(orgId, billingAccountId)
+          ]);
+
+          if (resp?.data) {
+            const paymentMethods = resp?.data?.payment_methods || [];
+            setBillingAccount(resp.data.billing_account);
+            setPaymentMethod(paymentMethods[0]);
+          }
         } else {
           setBillingAccount(undefined);
           setActiveSubscription(undefined);
@@ -354,6 +372,7 @@ export const FrontierContextProvider = ({
         setIsUserLoading,
         billingAccount,
         setBillingAccount,
+        paymentMethod,
         isBillingAccountLoading,
         setIsBillingAccountLoading,
         isActiveSubscriptionLoading,