Turn on Billing UI in releases (#6788)

* Turn on Billing UI in releases

* Update most snapshots but one, and new masks

e2e/playwright/snapshot-tests.spec.ts

@@ -5,7 +5,7 @@ import { TEST_SETTINGS, TEST_SETTINGS_KEY } from '@e2e/playwright/storageStates'
 import {
   getUtils,
   headerMasks,
-  networkingMasks,
+  lowerRightMasks,
   settingsToToml,
 } from '@e2e/playwright/test-utils'
 import { expect, test } from '@e2e/playwright/zoo-test'
@@ -88,7 +88,7 @@ const extrudeDefaultPlane = async (
 
   await expect(page).toHaveScreenshot({
     maxDiffPixels: 100,
-    mask: networkingMasks(page),
+    mask: lowerRightMasks(page),
   })
   await u.openKclCodePanel()
 }
@@ -173,7 +173,7 @@ test(
     await page.waitForTimeout(500)
     await expect(page).toHaveScreenshot({
       maxDiffPixels: 100,
-      mask: networkingMasks(page),
+      mask: lowerRightMasks(page),
     })
 
     const lineEndClick = () =>
@@ -200,7 +200,7 @@ test(
 
     await expect(page).toHaveScreenshot({
       maxDiffPixels: 100,
-      mask: networkingMasks(page),
+      mask: lowerRightMasks(page),
     })
     await endOfTangentClk()
 
@@ -210,7 +210,7 @@ test(
     await threePointArcMidPointMv()
     await expect(page).toHaveScreenshot({
       maxDiffPixels: 100,
-      mask: networkingMasks(page),
+      mask: lowerRightMasks(page),
     })
     await threePointArcMidPointClk()
     await page.waitForTimeout(100)
@@ -219,7 +219,7 @@ test(
     await page.waitForTimeout(500)
     await expect(page).toHaveScreenshot({
       maxDiffPixels: 100,
-      mask: networkingMasks(page),
+      mask: lowerRightMasks(page),
     })
 
     await threePointArcEndPointClk()
@@ -239,7 +239,7 @@ test(
     await page.waitForTimeout(500)
     await expect(page).toHaveScreenshot({
       maxDiffPixels: 100,
-      mask: networkingMasks(page),
+      mask: lowerRightMasks(page),
     })
     await arcEndClk()
   }
@@ -286,7 +286,7 @@ test(
     // Ensure the draft rectangle looks the same as it usually does
     await expect(page).toHaveScreenshot({
       maxDiffPixels: 100,
-      mask: networkingMasks(page),
+      mask: lowerRightMasks(page),
     })
   }
 )
@@ -328,7 +328,7 @@ test(
     // Ensure the draft rectangle looks the same as it usually does
     await expect(page).toHaveScreenshot({
       maxDiffPixels: 100,
-      mask: networkingMasks(page),
+      mask: lowerRightMasks(page),
     })
     await expect(page.locator('.cm-content')).toHaveText(
       `sketch001 = startSketchOn(XZ)profile001 = circle(sketch001, center = [366.89, -62.01], radius = 1)`
@@ -395,7 +395,7 @@ test.describe(
       // screen shot should show the sketch
       await expect(page).toHaveScreenshot({
         maxDiffPixels: 100,
-        mask: networkingMasks(page),
+        mask: lowerRightMasks(page),
       })
 
       await u.doAndWaitForImageDiff(
@@ -408,7 +408,7 @@ test.describe(
       // second screen shot should look almost identical, i.e. scale should be the same.
       await expect(page).toHaveScreenshot({
         maxDiffPixels: 100,
-        mask: networkingMasks(page),
+        mask: lowerRightMasks(page),
       })
     })
 
@@ -490,7 +490,7 @@ test.describe(
       // screen shot should show the sketch
       await expect(page).toHaveScreenshot({
         maxDiffPixels: 100,
-        mask: networkingMasks(page),
+        mask: lowerRightMasks(page),
       })
 
       // exit sketch
@@ -504,7 +504,7 @@ test.describe(
       // second screen shot should look almost identical, i.e. scale should be the same.
       await expect(page).toHaveScreenshot({
         maxDiffPixels: 100,
-        mask: networkingMasks(page),
+        mask: lowerRightMasks(page),
       })
     })
   }
@@ -563,7 +563,7 @@ part002 = startSketchOn(part001, face = seg01)
 
     await expect(page).toHaveScreenshot({
       maxDiffPixels: 100,
-      mask: networkingMasks(page),
+      mask: lowerRightMasks(page),
     })
   }
 )
@@ -599,7 +599,7 @@ test(
 
     await expect(page).toHaveScreenshot({
       maxDiffPixels: 100,
-      mask: networkingMasks(page),
+      mask: lowerRightMasks(page),
     })
   }
 )
@@ -636,7 +636,7 @@ test(
 
     await expect(page).toHaveScreenshot({
       maxDiffPixels: 100,
-      mask: networkingMasks(page),
+      mask: lowerRightMasks(page),
     })
   }
 )
@@ -701,7 +701,7 @@ test.describe('Grid visibility', { tag: '@snapshot' }, () => {
 
     await expect(stream).toHaveScreenshot({
       maxDiffPixels: 100,
-      mask: [...headerMasks(page), ...networkingMasks(page)],
+      mask: [...headerMasks(page), ...lowerRightMasks(page)],
     })
   })
 
@@ -722,7 +722,7 @@ test.describe('Grid visibility', { tag: '@snapshot' }, () => {
 
     await expect(stream).toHaveScreenshot({
       maxDiffPixels: 100,
-      mask: [...headerMasks(page), ...networkingMasks(page)],
+      mask: [...headerMasks(page), ...lowerRightMasks(page)],
     })
   })
 
@@ -761,7 +761,7 @@ test.describe('Grid visibility', { tag: '@snapshot' }, () => {
 
     await expect(stream).toHaveScreenshot({
       maxDiffPixels: 100,
-      mask: [...headerMasks(page), ...networkingMasks(page)],
+      mask: [...headerMasks(page), ...lowerRightMasks(page)],
     })
   })
 })
@@ -829,7 +829,7 @@ test('theme persists', async ({ page, context }) => {
 
   await expect(page, 'expect screenshot to have light theme').toHaveScreenshot({
     maxDiffPixels: 100,
-    mask: networkingMasks(page),
+    mask: lowerRightMasks(page),
   })
 })
 
@@ -870,7 +870,7 @@ sweepSketch = startSketchOn(XY)
 
     await expect(page, 'expect small color widget').toHaveScreenshot({
       maxDiffPixels: 100,
-      mask: networkingMasks(page),
+      mask: lowerRightMasks(page),
     })
   })
 
@@ -923,7 +923,7 @@ sweepSketch = startSketchOn(XY)
       'expect small color widget to have window open'
     ).toHaveScreenshot({
       maxDiffPixels: 100,
-      mask: networkingMasks(page),
+      mask: lowerRightMasks(page),
     })
   })
 })

e2e/playwright/test-utils.ts

@@ -31,8 +31,9 @@ export const headerMasks = (page: Page) => [
   page.locator('#sidebar-bottom-ribbon'),
 ]
 
-export const networkingMasks = (page: Page) => [
+export const lowerRightMasks = (page: Page) => [
   page.getByTestId('network-toggle'),
+  page.getByTestId('billing-remaining-bar'),
 ]
 
 export type TestColor = [number, number, number]

e2e/playwright/testing-settings.spec.ts

@@ -20,7 +20,7 @@ import {
   createProject,
   executorInputPath,
   getUtils,
-  networkingMasks,
+  lowerRightMasks,
   settingsToToml,
   tomlToSettings,
 } from '@e2e/playwright/test-utils'
@@ -1061,7 +1061,7 @@ fn cube`
         'toggle-settings-initial.png',
         {
           maxDiffPixels: 15,
-          mask: networkingMasks(page),
+          mask: lowerRightMasks(page),
         }
       )
 
@@ -1078,7 +1078,7 @@ fn cube`
         'toggle-settings-initial.png',
         {
           maxDiffPixels: 15,
-          mask: networkingMasks(page),
+          mask: lowerRightMasks(page),
         }
       )
     })

package-lock.json

@@ -2492,7 +2492,6 @@
     },
     "node_modules/@clack/prompts/node_modules/is-unicode-supported": {
       "version": "1.3.0",
-      "extraneous": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {

src/components/LowerRightControls.tsx

@@ -14,11 +14,7 @@ import Tooltip from '@src/components/Tooltip'
 import { useAbsoluteFilePath } from '@src/hooks/useAbsoluteFilePath'
 import { openExternalBrowserIfDesktop } from '@src/lib/openWindow'
 import { PATHS } from '@src/lib/paths'
-import {
+import { APP_VERSION, getReleaseUrl } from '@src/routes/utils'
-  APP_VERSION,
-  IS_NIGHTLY_OR_DEBUG,
-  getReleaseUrl,
-} from '@src/routes/utils'
 
 import { billingActor } from '@src/lib/singletons'
 
@@ -39,22 +35,23 @@ export function LowerRightControls({
     <section className="fixed bottom-2 right-2 flex flex-col items-end gap-3 pointer-events-none">
       {children}
       <menu className="flex items-center justify-end gap-3 pointer-events-auto">
-        {IS_NIGHTLY_OR_DEBUG && (
+        <Popover className="relative">
-          <Popover className="relative">
+          <Popover.Button
-            <Popover.Button className="p-0 !border-transparent">
+            className="p-0 !border-transparent"
-              <BillingRemaining
+            data-testid="billing-remaining-bar"
-                mode={BillingRemainingMode.ProgressBarFixed}
+          >
-                billingActor={billingActor}
+            <BillingRemaining
-              />
+              mode={BillingRemainingMode.ProgressBarFixed}
-              <Tooltip position="top" contentClassName="text-xs">
+              billingActor={billingActor}
-                Text-to-CAD credits
+            />
-              </Tooltip>
+            <Tooltip position="top" contentClassName="text-xs">
-            </Popover.Button>
+              Text-to-CAD credits
-            <Popover.Panel className="absolute right-0 left-auto bottom-full mb-1 w-64 flex flex-col gap-1 align-stretch rounded-lg shadow-lg text-sm">
+            </Tooltip>
-              <BillingDialog billingActor={billingActor} />
+          </Popover.Button>
-            </Popover.Panel>
+          <Popover.Panel className="absolute right-0 left-auto bottom-full mb-1 w-64 flex flex-col gap-1 align-stretch rounded-lg shadow-lg text-sm">
-          </Popover>
+            <BillingDialog billingActor={billingActor} />
-        )}
+          </Popover.Panel>
+        </Popover>
         <a
           onClick={openExternalBrowserIfDesktop(getReleaseUrl())}
           href={getReleaseUrl()}

src/routes/Home.tsx

@@ -1,4 +1,3 @@
-import { IS_NIGHTLY_OR_DEBUG } from '@src/routes/utils'
 import type { FormEvent, HTMLProps } from 'react'
 import { useEffect } from 'react'
 import { toast } from 'react-hot-toast'
@@ -351,13 +350,11 @@ const Home = () => {
             </li>
           </ul>
           <ul className="flex flex-col">
-            {IS_NIGHTLY_OR_DEBUG && (
+            <li className="contents">
-              <li className="contents">
+              <div className="my-2">
-                <div className="my-2">
+                <BillingDialog billingActor={billingActor} />
-                  <BillingDialog billingActor={billingActor} />
+              </div>
-                </div>
+            </li>
-              </li>
-            )}
             <li className="contents">
               <ActionButton
                 Element="externalLink"