fix: buy credit option not visible (calcom#22721)

Author: anikdhabal

apps/web/modules/settings/billing/components/BillingCredits.tsx

@@ -192,7 +192,12 @@ export default function BillingCredits() {
               </div>
             </div>
             <div className="mt-auto">
-              <Button color="primary" target="_blank" EndIcon="external-link" type="submit">
+              <Button
+                color="primary"
+                target="_blank"
+                EndIcon="external-link"
+                type="submit"
+                data-testid="buy-credits">
                 {t("buy_credits")}
               </Button>
             </div>

apps/web/playwright/buy-credits.e2e.ts

@@ -0,0 +1,41 @@
+import { expect } from "@playwright/test";
+import type { Page } from "@playwright/test";
+
+import { test } from "./lib/fixtures";
+
+test.describe.configure({ mode: "parallel" });
+test.afterEach(({ users }) => users.deleteAll());
+
+test.describe("Buy Credits E2E Tests", () => {
+  test("should display buy credits option for personal account", async ({ page, users }) => {
+    const user = await users.create();
+    await user.apiLogin();
+
+    await page.goto("/settings/billing");
+
+    await expectBuyCreditsButtonVisibleAndEnabled(page);
+  });
+
+  test("should display buy credits option for team account", async ({ page, users }) => {
+    const teamOwner = await users.create(
+      { username: "team-owner", name: "Team Owner" },
+      {
+        hasTeam: true,
+        teammates: [{ name: "teammate-1" }],
+      }
+    );
+    await teamOwner.apiLogin();
+
+    const { team } = await teamOwner.getFirstTeamMembership();
+
+    await page.goto(`/settings/teams/${team.id}/billing`);
+
+    await expectBuyCreditsButtonVisibleAndEnabled(page);
+  });
+});
+
+async function expectBuyCreditsButtonVisibleAndEnabled(page: Page) {
+  const buyCreditsButton = page.getByTestId("buy-credits");
+  await expect(buyCreditsButton).toBeVisible();
+  await expect(buyCreditsButton).toBeEnabled();
+}

packages/lib/constants.ts

@@ -225,7 +225,8 @@ export const IS_DUB_REFERRALS_ENABLED =
 
 export const CAL_VIDEO_MEETING_LINK_FOR_TESTING = process.env.CAL_VIDEO_MEETING_LINK_FOR_TESTING;
 
-export const IS_SMS_CREDITS_ENABLED = !!process.env.NEXT_PUBLIC_STRIPE_CREDITS_PRICE_ID;
+export const IS_SMS_CREDITS_ENABLED =
+  !!process.env.NEXT_PUBLIC_STRIPE_CREDITS_PRICE_ID || !!process.env.NEXT_PUBLIC_IS_E2E;
 export const DATABASE_CHUNK_SIZE = parseInt(process.env.DATABASE_CHUNK_SIZE || "25", 10);
 
 export const NEXTJS_CACHE_TTL = 3600; // 1 hour

packages/trpc/server/routers/viewer/credits/buyCredits.handler.ts

@@ -36,7 +36,7 @@ export const buyCreditsHandler = async ({ ctx, input }: BuyCreditsOptions) => {
     // if user id is part of a team, user can't buy credits for themselves
     const memberships = await MembershipRepository.findAllAcceptedPublishedTeamMemberships(ctx.user.id);
 
-    if (!memberships || memberships.length > 0) {
+    if (memberships && memberships.length > 0) {
       throw new TRPCError({
         code: "UNAUTHORIZED",
       });

packages/trpc/server/routers/viewer/credits/getAllCredits.handler.ts

@@ -27,7 +27,7 @@ export const getAllCreditsHandler = async ({ ctx, input }: GetAllCreditsOptions)
     //if user is part of team, don't return any credits if teamId is not given
     const memberships = await MembershipRepository.findAllAcceptedPublishedTeamMemberships(ctx.user.id);
 
-    if (!memberships || memberships.length > 0) {
+    if (memberships && memberships.length > 0) {
       return null;
     }
   }