From c5cf909d742a6230276b63ae7911ef04a0192025 Mon Sep 17 00:00:00 2001
From: Tung Wu <tung@oursky.com>
Date: Fri, 6 Dec 2024 16:31:05 +0800
Subject: [PATCH] Display a message if custom smtp is not available

---
 portal/src/BlueMessageBar.tsx                 |  2 +-
 .../portal/SMTPConfigurationScreen.tsx        | 33 ++++++++++++++++---
 portal/src/locale-data/en.json                |  1 +
 3 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/portal/src/BlueMessageBar.tsx b/portal/src/BlueMessageBar.tsx
index 86be8bfa17..0246582f64 100644
--- a/portal/src/BlueMessageBar.tsx
+++ b/portal/src/BlueMessageBar.tsx
@@ -56,7 +56,7 @@ export default function BlueMessageBar(
   );
 
   return (
-    <ThemeProvider theme={newTheme}>
+    <ThemeProvider as={React.Fragment} theme={newTheme}>
       <MessageBar styles={styles} {...rest} />
     </ThemeProvider>
   );
diff --git a/portal/src/graphql/portal/SMTPConfigurationScreen.tsx b/portal/src/graphql/portal/SMTPConfigurationScreen.tsx
index 07f61698a3..9ce69fbfdc 100644
--- a/portal/src/graphql/portal/SMTPConfigurationScreen.tsx
+++ b/portal/src/graphql/portal/SMTPConfigurationScreen.tsx
@@ -48,6 +48,8 @@ import DefaultButton from "../../DefaultButton";
 import { AppSecretKey } from "./globalTypes.generated";
 import { useLocationEffect } from "../../hook/useLocationEffect";
 import { useAppSecretVisitToken } from "./mutations/generateAppSecretVisitTokenMutation";
+import { useAppFeatureConfigQuery } from "./query/appFeatureConfigQuery";
+import FeatureDisabledMessageBar from "./FeatureDisabledMessageBar";
 
 interface LocationState {
   isEdit: boolean;
@@ -245,13 +247,14 @@ function ProviderDescription(props: ProviderDescriptionProps) {
 }
 
 interface SMTPConfigurationScreenContentProps {
+  isCustomSMTPDisabled: boolean;
   sendTestEmailHandle: UseSendTestEmailMutationReturnType;
   form: AppSecretConfigFormModel<FormState>;
 }
 
 const SMTPConfigurationScreenContent: React.VFC<SMTPConfigurationScreenContentProps> =
   function SMTPConfigurationScreenContent(props) {
-    const { form, sendTestEmailHandle } = props;
+    const { form, sendTestEmailHandle, isCustomSMTPDisabled } = props;
     const { state, setState } = form;
     const { sendTestEmail, loading } = sendTestEmailHandle;
 
@@ -503,6 +506,12 @@ const SMTPConfigurationScreenContent: React.VFC<SMTPConfigurationScreenContentPr
         <ScreenDescription className={styles.widget}>
           <FormattedMessage id="SMTPConfigurationScreen.description" />
         </ScreenDescription>
+        {isCustomSMTPDisabled ? (
+          <FeatureDisabledMessageBar
+            className={styles.widget}
+            messageID="FeatureConfig.custom-smtp.disabled"
+          />
+        ) : null}
 
         <Widget className={styles.widget} contentLayout="grid">
           <Toggle
@@ -511,7 +520,7 @@ const SMTPConfigurationScreenContent: React.VFC<SMTPConfigurationScreenContentPr
             onChange={onChangeEnabled}
             label={renderToString("SMTPConfigurationScreen.enable.label")}
             inlineLabel={true}
-            disabled={state.isPasswordMasked}
+            disabled={state.isPasswordMasked || isCustomSMTPDisabled}
           />
           {state.enabled ? (
             <>
@@ -622,6 +631,7 @@ const SMTPConfigurationScreenContent: React.VFC<SMTPConfigurationScreenContentPr
               {state.isPasswordMasked ? (
                 <PrimaryButton
                   className={styles.columnSmall}
+                  disabled={isCustomSMTPDisabled}
                   onClick={onClickEdit}
                   text={<FormattedMessage id="edit" />}
                 />
@@ -678,20 +688,33 @@ const SMTPConfigurationScreen1: React.VFC<{
     constructConfig,
     constructSecretUpdateInstruction,
   });
+  const featureConfig = useAppFeatureConfigQuery(appID);
 
   const sendTestEmailHandle = useSendTestEmailMutation(appID);
 
-  if (form.isLoading) {
+  if (form.isLoading || featureConfig.loading) {
     return <ShowLoading />;
   }
 
-  if (form.loadError) {
-    return <ShowError error={form.loadError} onRetry={form.reload} />;
+  if (form.loadError ?? featureConfig.error) {
+    return (
+      <ShowError
+        error={form.loadError ?? featureConfig.error}
+        onRetry={() => {
+          form.reload();
+          featureConfig.refetch().finally(() => {});
+        }}
+      />
+    );
   }
 
   return (
     <FormContainer form={form} localError={sendTestEmailHandle.error}>
       <SMTPConfigurationScreenContent
+        isCustomSMTPDisabled={
+          featureConfig.effectiveFeatureConfig?.messaging
+            ?.custom_smtp_disabled ?? false
+        }
         sendTestEmailHandle={sendTestEmailHandle}
         form={form}
       />
diff --git a/portal/src/locale-data/en.json b/portal/src/locale-data/en.json
index 06edcce25e..d58a5d8fb9 100644
--- a/portal/src/locale-data/en.json
+++ b/portal/src/locale-data/en.json
@@ -1552,6 +1552,7 @@
   "FeatureConfig.collaborator.contact-us": "Your plan only include {maximum, plural, one{1 member seat} other{# member seats}}, {ExternalLink, react, href{{contactUsHref}} children{contact us to upgrade} target{_blank}}",
   "FeatureConfig.web3-nft.maximum": "You can index {maximum, plural, one{1 collection} other{# collections}} max. {ReactRouterLink, react, to{{planPagePath}} children{Upgrade your project plan} target{_blank}} to add more",
   "FeatureConfig.edit-template.disabled": "{ReactRouterLink, react, to{{planPagePath}} children{Upgrade your project plan} target{_blank}} to change the templates.",
+  "FeatureConfig.custom-smtp.disabled": "Custom email provider is not available for your project plan. {ReactRouterLink, react, to{{planPagePath}} children{Upgrade your project plan} target{_blank}}.",
   "SubscriptionCurrentPlanSummary.title.known-plan": "Current Plan: {name} {expiredAt, select, false{(${amount}/mo)} other{(Expire at: {expiredAt})}}",
   "SubscriptionCurrentPlanSummary.title.custom-plan": "Custom Plan: {name}",
   "SubscriptionCurrentPlanSummary.label.free": "Free",