Support saving without branding

Fix unsaved changes text persisting after saving without branding

Author: synzen

services/backend-api/client/src/features/templates/components/TemplateGalleryModal/UpgradePrompt.tsx

@@ -28,6 +28,7 @@ export interface UpgradePromptProps {
   isPaddleLoaded?: boolean;
   onCheckout: (priceId: string) => void;
   onBackToEditor: () => void;
+  onSaveWithoutBranding: () => void;
 }
 
 export const UpgradePrompt = ({
@@ -39,6 +40,7 @@ export const UpgradePrompt = ({
   isPaddleLoaded,
   onCheckout,
   onBackToEditor,
+  onSaveWithoutBranding,
 }: UpgradePromptProps) => {
   return (
     <Box
@@ -74,7 +76,7 @@ export const UpgradePrompt = ({
             (f) =>
               f.name === ProductFeature.Webhooks ||
               f.name === ProductFeature.Feeds ||
-              f.name === ProductFeature.RefreshRate
+              f.name === ProductFeature.RefreshRate,
           )
           .map((feature) => (
             <HStack as="li" key={feature.name} spacing={2}>
@@ -141,6 +143,9 @@ export const UpgradePrompt = ({
       >
         Get {PRODUCT_NAMES[ProductKey.Tier1]}
       </Button>
+      <Button variant="outline" size="sm" mb={2} onClick={onSaveWithoutBranding}>
+        Save without branding
+      </Button>
       <Box mb={4}>
         <ChakraLink fontSize="sm" color="whiteAlpha.700" onClick={onBackToEditor} cursor="pointer">
           Back to editor

services/backend-api/client/src/features/templates/components/TemplateGalleryModal/index.tsx

@@ -343,6 +343,14 @@ const TemplateGalleryModalInner = (props: TemplateGalleryModalProps) => {
         });
       }}
       onBackToEditor={() => setModalView("editor")}
+      onSaveWithoutBranding={() => {
+        clearBranding();
+        if (props.mode === "editor") {
+          props.onSave();
+        } else if (selectedTemplateId) {
+          props.onPrimaryAction(selectedTemplateId);
+        }
+      }}
     />
   );
 

services/backend-api/client/src/pages/MessageBuilder.tsx

@@ -324,6 +324,11 @@ const MessageBuilderContent: React.FC = () => {
           details: connectionDetails,
         });
 
+        if (!webhooksAllowed) {
+          setBrandingDisplayName(existingWebhookName);
+          setBrandingAvatarUrl(existingWebhookIconUrl);
+        }
+
         createSuccessAlert({
           title: "Successfully saved message format",
           description: "Your Discord message format has been updated.",

services/backend-api/e2e/tests/13-branding-fields.spec.ts

@@ -169,6 +169,11 @@ test.describe("Branding Fields - Template Gallery Modal", () => {
       upgradeRegion.getByText(/Payments handled by Paddle/),
     ).toBeVisible();
 
+    // Verify "Save without branding" button is visible on upgrade prompt
+    await expect(
+      upgradeRegion.getByRole("button", { name: "Save without branding" }),
+    ).toBeVisible();
+
     // Verify "Back to editor" link works
     await upgradeRegion.getByText("Back to editor").click();
     await expect(upgradeRegion).not.toBeVisible();
@@ -192,6 +197,47 @@ test.describe("Branding Fields - Template Gallery Modal", () => {
     await expect(paddleFrame.first()).toBeVisible({ timeout: 15000 });
   });
 
+  test("saves without branding from upgrade prompt screen", async ({
+    page,
+    testFeed,
+  }) => {
+    const serverName = getTestServerName();
+    const channelName = getTestChannelName();
+
+    test.skip(
+      !serverName || !channelName,
+      "serverName and channelName must be configured in e2econfig.json",
+    );
+
+    const modal = await navigateToTemplateModal(
+      page,
+      testFeed.id,
+      serverName!,
+      channelName!,
+    );
+
+    // Fill branding then go to upgrade prompt
+    await modal.getByLabel("Display Name").fill("My Custom Bot");
+    await modal
+      .getByRole("button", { name: "Upgrade to save with branding" })
+      .click();
+
+    const upgradeRegion = modal.getByRole("region", {
+      name: "Upgrade to save custom branding",
+    });
+    await expect(upgradeRegion).toBeVisible();
+
+    // Click "Save without branding" on the upgrade prompt
+    await upgradeRegion
+      .getByRole("button", { name: "Save without branding" })
+      .click();
+
+    // Connection should save successfully
+    await expect(page.getByText("You're all set")).toBeVisible({
+      timeout: 10000,
+    });
+  });
+
   test("saves without branding when clicking save without branding", async ({
     page,
     testFeed,