Support approved free plan #3299

ref #3291

Author: tung2744

portal/src/graphql/portal/LoginMethodConfigurationScreen.tsx

@@ -58,6 +58,7 @@ import {
   expandSpecifier,
 } from "../../util/resource";
 import { clearEmptyObject } from "../../util/misc";
+import { isLimitedFreePlan } from "../../util/plan";
 import ShowLoading from "../../ShowLoading";
 import ShowError from "../../ShowError";
 import ScreenContent from "../../ScreenContent";
@@ -85,6 +86,7 @@ import LabelWithTooltip from "../../LabelWithTooltip";
 import PhoneInputListWidget from "./PhoneInputListWidget";
 import PasswordSettings from "./PasswordSettings";
 import ShowOnlyIfSIWEIsDisabled from "./ShowOnlyIfSIWEIsDisabled";
+import BlueMessageBar from "../../BlueMessageBar";
 import { useTagPickerWithNewTags } from "../../hook/useInput";
 import { fixTagPickerStyles } from "../../bugs";
 import { useResourceForm } from "../../hook/useResourceForm";
@@ -495,6 +497,7 @@ interface ConfigFormState {
 }
 
 interface FeatureConfigFormState {
+  planName: string | null;
   phoneLoginIDDisabled: boolean;
   passwordPolicyFeatureConfig: PasswordPolicyFeatureConfig;
 }
@@ -517,6 +520,35 @@ interface FormModel {
   save: () => Promise<void>;
 }
 
+function shouldShowFreePlanWarning(formState: FormState): boolean {
+  const {
+    identitiesControl,
+    loginIDKeyConfigsControl,
+    primaryAuthenticatorsControl,
+    planName,
+  } = formState;
+
+  if (planName == null) {
+    return false;
+  }
+
+  if (!isLimitedFreePlan(planName)) {
+    return false;
+  }
+
+  // For our purpose, controlListUnwrap is sufficient here.
+  const identities = controlListUnwrap(identitiesControl);
+  const loginIDKeyConfigs = controlListUnwrap(loginIDKeyConfigsControl);
+  const primaryAuthenticators = controlListUnwrap(primaryAuthenticatorsControl);
+
+  const loginIDEnabled = identities.includes("login_id");
+  const phoneEnabled =
+    loginIDKeyConfigs.find((a) => a.type === "phone") != null;
+  const oobOTPSMSEnabled = primaryAuthenticators.includes("oob_otp_sms");
+
+  return loginIDEnabled && phoneEnabled && oobOTPSMSEnabled;
+}
+
 // eslint-disable-next-line complexity
 function loginMethodFromFormState(formState: FormState): LoginMethod {
   const {
@@ -1548,6 +1580,7 @@ function AuthenticationButton(props: AuthenticationButtonProps) {
 
 interface LoginMethodChooserProps {
   loginMethod: LoginMethod;
+  showFreePlanWarning: boolean;
   phoneLoginIDDisabled: boolean;
   passkeyChecked: boolean;
   appID: string;
@@ -1558,6 +1591,7 @@ interface LoginMethodChooserProps {
 function LoginMethodChooser(props: LoginMethodChooserProps) {
   const {
     loginMethod,
+    showFreePlanWarning,
     phoneLoginIDDisabled,
     appID,
     onChangeLoginMethod,
@@ -1716,6 +1750,11 @@ function LoginMethodChooser(props: LoginMethodChooserProps) {
           onChange={onChangePasskeyChecked}
         />
       )}
+      {showFreePlanWarning ? (
+        <BlueMessageBar>
+          <FormattedMessage id="warnings.free-plan" />
+        </BlueMessageBar>
+      ) : null}
     </Widget>
   );
 }
@@ -2905,6 +2944,11 @@ const LoginMethodConfigurationContent: React.VFC<LoginMethodConfigurationContent
       resources,
     } = state;
 
+    const showFreePlanWarning = useMemo(
+      () => shouldShowFreePlanWarning(state),
+      [state]
+    );
+
     const isPasswordlessEnabled = useMemo(() => {
       return primaryAuthenticatorsControl
         .filter((c) => c.value === "oob_otp_email" || c.value === "oob_otp_sms")
@@ -3059,6 +3103,7 @@ const LoginMethodConfigurationContent: React.VFC<LoginMethodConfigurationContent
             passkeyChecked={passkeyChecked}
           />
           <LoginMethodChooser
+            showFreePlanWarning={showFreePlanWarning}
             loginMethod={loginMethod}
             phoneLoginIDDisabled={phoneLoginIDDisabled}
             passkeyChecked={passkeyChecked}
@@ -3260,6 +3305,7 @@ const LoginMethodConfigurationScreen: React.VFC =
     const state = useMemo<FormState>(() => {
       return {
         resources: resourceForm.state.resources,
+        planName: featureConfig.planName,
         phoneLoginIDDisabled:
           featureConfig.effectiveFeatureConfig?.identity?.login_id?.types?.phone
             ?.disabled ?? false,
@@ -3268,6 +3314,7 @@ const LoginMethodConfigurationScreen: React.VFC =
         ...configForm.state,
       };
     }, [
+      featureConfig.planName,
       resourceForm.state.resources,
       featureConfig.effectiveFeatureConfig?.identity?.login_id?.types?.phone
         ?.disabled,

portal/src/graphql/portal/SubscriptionCurrentPlanSummary.tsx

@@ -19,6 +19,7 @@ import { DateTime } from "luxon";
 import { Context, FormattedMessage } from "@oursky/react-messageformat";
 import { formatDatetime } from "../../util/formatDatetime";
 import LinkButton from "../../LinkButton";
+import BlueMessageBar from "../../BlueMessageBar";
 import styles from "./SubscriptionCurrentPlanSummary.module.css";
 
 export interface SubscriptionCurrentPlanSummaryProps {
@@ -34,6 +35,7 @@ export interface SubscriptionCurrentPlanSummaryProps {
   onClickManageSubscription?: IButtonProps["onClick"];
   manageSubscriptionLoading?: boolean;
   manageSubscriptionDisabled?: boolean;
+  showFreePlanWarning?: boolean;
   children?: React.ReactNode;
 }
 
@@ -306,6 +308,7 @@ function SubscriptionCurrentPlanSummary(
     manageSubscriptionLoading,
     manageSubscriptionDisabled,
     isCustomPlan,
+    showFreePlanWarning,
     children,
   } = props;
   return (
@@ -344,6 +347,11 @@ function SubscriptionCurrentPlanSummary(
           />
         ) : null}
       </div>
+      {showFreePlanWarning === true ? (
+        <BlueMessageBar className="mt-4 max-w-2xl">
+          <FormattedMessage id="warnings.free-plan" />
+        </BlueMessageBar>
+      ) : null}
     </div>
   );
 }

portal/src/graphql/portal/SubscriptionPlanCard.tsx

@@ -469,7 +469,7 @@ function CTA_(props: CTAProps): React.ReactElement {
             className={styles.cta}
             disabled={true}
             text={
-              <FormattedMessage id="SubscriptionPlanCard.label.subscribe" />
+              <FormattedMessage id="SubscriptionPlanCard.label.non-applicable" />
             }
           />
         </ThemeProvider>