refactor(console): get and check skuId from checkout session

packages/console/package.json

@@ -27,7 +27,7 @@
   "devDependencies": {
     "@fontsource/roboto-mono": "^5.0.0",
     "@jest/types": "^29.5.0",
-    "@logto/cloud": "0.2.5-3b703da",
+    "@logto/cloud": "0.2.5-923c26f",
     "@logto/connector-kit": "workspace:^4.0.0",
     "@logto/core-kit": "workspace:^2.5.0",
     "@logto/elements": "workspace:^0.0.0",

packages/console/src/pages/CheckoutSuccessCallback/index.tsx

@@ -11,8 +11,10 @@ import { useCloudApi } from '@/cloud/hooks/use-cloud-api';
 import AppLoading from '@/components/AppLoading';
 import { GtagConversionId, reportToGoogle } from '@/components/Conversion/utils';
 import PlanName from '@/components/PlanName';
+import { isDevFeaturesEnabled } from '@/consts/env';
 import { checkoutStateQueryKey } from '@/consts/subscriptions';
 import { TenantsContext } from '@/contexts/TenantsProvider';
+import useLogtoSkus from '@/hooks/use-logto-skus';
 import useSubscriptionPlans from '@/hooks/use-subscription-plans';
 import useTenantPathname from '@/hooks/use-tenant-pathname';
 import { clearLocalCheckoutSession, getLocalCheckoutSession } from '@/utils/checkout';
@@ -29,8 +31,11 @@ function CheckoutSuccessCallback() {
   const { search } = useLocation();
   const checkoutState = new URLSearchParams(search).get(checkoutStateQueryKey);
   const { state, sessionId, callbackPage, isDowngrade } = getLocalCheckoutSession() ?? {};
+
   const { data: subscriptionPlans, error: fetchPlansError } = useSubscriptionPlans();
   const isLoadingPlans = !subscriptionPlans && !fetchPlansError;
+  const { data: logtoSkus, error: fetchLogtoSkusError } = useLogtoSkus();
+  const isLoadingLogtoSkus = !logtoSkus && !fetchLogtoSkusError;
 
   // Note: if we can't get the subscription results in 10 seconds, we will redirect to the console home page
   useTimer({
@@ -61,6 +66,7 @@ function CheckoutSuccessCallback() {
 
   const checkoutTenantId = stripeCheckoutSession?.tenantId;
   const checkoutPlanId = stripeCheckoutSession?.planId;
+  const checkoutSkuId = stripeCheckoutSession?.skuId;
 
   const { data: tenantSubscription } = useSWR(
     checkoutTenantId && `/api/tenants/${checkoutTenantId}/subscription`,
@@ -74,22 +80,45 @@ function CheckoutSuccessCallback() {
   );
 
   const isCheckoutSuccessful =
-    !isLoadingPlans &&
     checkoutTenantId &&
     stripeCheckoutSession.status === 'complete' &&
-    checkoutPlanId === tenantSubscription?.planId;
+    (isDevFeaturesEnabled
+      ? !isLoadingLogtoSkus && checkoutSkuId === tenantSubscription?.planId
+      : !isLoadingPlans && checkoutPlanId === tenantSubscription?.planId);
 
   useEffect(() => {
     if (isCheckoutSuccessful) {
       clearLocalCheckoutSession();
 
-      const checkoutPlan = subscriptionPlans?.find((plan) => plan.id === checkoutPlanId);
-      if (checkoutPlan) {
-        toast.success(
-          <Trans components={{ name: <PlanName name={checkoutPlan.name} /> }}>
-            {t(isDowngrade ? 'downgrade_success' : 'upgrade_success')}
-          </Trans>
-        );
+      if (isDevFeaturesEnabled) {
+        const checkoutSku = logtoSkus?.find((sku) => sku.id === checkoutPlanId);
+        if (checkoutSku) {
+          toast.success(
+            <Trans
+              components={{
+                name: (
+                  <PlanName
+                    skuId={checkoutSku.id}
+                    // Generally `checkoutPlanId` and a properly setup of SKU `name` should not be null, we still need to handle the edge case to make the type inference happy.
+                    // Also `name` will be deprecated in the future once the new pricing model is ready.
+                    name={checkoutPlanId ?? checkoutSku.name ?? checkoutSku.id}
+                  />
+                ),
+              }}
+            >
+              {t(isDowngrade ? 'downgrade_success' : 'upgrade_success')}
+            </Trans>
+          );
+        }
+      } else {
+        const checkoutPlan = subscriptionPlans?.find((plan) => plan.id === checkoutPlanId);
+        if (checkoutPlan) {
+          toast.success(
+            <Trans components={{ name: <PlanName name={checkoutPlan.name} /> }}>
+              {t(isDowngrade ? 'downgrade_success' : 'upgrade_success')}
+            </Trans>
+          );
+        }
       }
 
       // No need to check `isDowngrade` here, since a downgrade must occur in a tenant with a Pro
@@ -115,6 +144,7 @@ function CheckoutSuccessCallback() {
     currentTenantId,
     isCheckoutSuccessful,
     isDowngrade,
+    logtoSkus,
     navigate,
     navigateTenant,
     subscriptionPlans,