Billing UI (Nightly & Dev only) and Jest component unit testing (#6640)

A bajillion commits hi * all the shit i'll git reset origin/main && git add -p . later * fmt * wip * fmt * rebase; fmt; tsc; lint; * fmt * Add jest tests * fmt * ok * add nightly checks * More is_nightly checks * be happy codespell * Make vitest ignore my shit * nightly OR debug; try vitest fixing again * Add this back * fix * Update src/components/LowerRightControls.tsx Co-authored-by: Frank Noirot <frank@zoo.dev> * Update src/components/LowerRightControls.tsx Co-authored-by: Frank Noirot <frank@zoo.dev> * Update src/components/LowerRightControls.tsx Co-authored-by: Frank Noirot <frank@zoo.dev> * Update src/components/BillingDialog.tsx Co-authored-by: Frank Noirot <frank@zoo.dev> * Update tailwind.config.js Co-authored-by: Frank Noirot <frank@zoo.dev> * Update tailwind.config.js Co-authored-by: Frank Noirot <frank@zoo.dev> * Update src/components/BillingRemaining.tsx Co-authored-by: Frank Noirot <frank@zoo.dev> * Update src/components/BillingRemaining.tsx Co-authored-by: Frank Noirot <frank@zoo.dev> * Update src/components/CustomIcon.tsx Co-authored-by: Frank Noirot <frank@zoo.dev> * Update src/components/CustomIcon.tsx Co-authored-by: Frank Noirot <frank@zoo.dev> * Update src/components/CustomIcon.tsx Co-authored-by: Frank Noirot <frank@zoo.dev> * Update src/components/CustomIcon.tsx Co-authored-by: Frank Noirot <frank@zoo.dev> * Update src/components/BillingRemaining.tsx Co-authored-by: Frank Noirot <frank@zoo.dev> * Update src/components/BillingRemaining.tsx Co-authored-by: Frank Noirot <frank@zoo.dev> * fixes * tid bits * Fix tests * color * Update src/components/BillingRemaining.tsx Co-authored-by: Frank Noirot <frank@zoo.dev> * fix someone else's problem --------- Co-authored-by: Frank Noirot <frank@zoo.dev>
2025-05-06 15:07:22 -04:00
parent 7b0ea5078c
commit 8fb1563f2d
24 changed files with 4247 additions and 77 deletions
--- a/src/components/BillingDialog.tsx
+++ b/src/components/BillingDialog.tsx
@ -0,0 +1,54 @@
+import { useSelector } from '@xstate/react'
+import { openExternalBrowserIfDesktop } from '@src/lib/openWindow'
+import { CustomIcon } from '@src/components/CustomIcon'
+import {
+  BillingRemaining,
+  BillingRemainingMode,
+} from '@src/components/BillingRemaining'
+
+import type { BillingActor } from '@src/machines/billingMachine'
+
+export const BillingDialog = (props: { billingActor: BillingActor }) => {
+  const billingContext = useSelector(
+    props.billingActor,
+    ({ context }) => context
+  )
+  const hasUnlimited = billingContext.credits === Infinity
+
+  return (
+    <div className="bg-ml-green fg-ml-black flex flex-row rounded-lg p-4 gap-2 text-xs">
+      <div>
+        <div className="rounded bg-ml-black p-1">
+          {hasUnlimited ? (
+            <CustomIcon name="infinity" className="!text-ml-white w-5 h-5" />
+          ) : (
+            <CustomIcon name="star" className="!text-ml-white w-5 h-5" />
+          )}
+        </div>
+      </div>
+      <div className="flex flex-col gap-2">
+        <div className="font-bold text-ml-black h-5 py-1">
+          {hasUnlimited ? 'Unlimited Text-to-CAD' : 'Upgrade your plan'}
+        </div>
+        <div className="text-ml-grey">
+          {hasUnlimited
+            ? 'You have unlimited use on your paid plan.'
+            : 'for unlimited usage of Text-to-CAD and more!'}
+        </div>
+        <BillingRemaining
+          mode={BillingRemainingMode.ProgressBarStretch}
+          billingActor={props.billingActor}
+        />
+        <a
+          className="bg-ml-black text-ml-white rounded-lg text-center p-1 cursor-pointer"
+          href="https://zoo.dev/api-pricing"
+          target="_blank"
+          rel="noopener noreferrer"
+          onClick={openExternalBrowserIfDesktop()}
+        >
+          Upgrade
+        </a>
+      </div>
+    </div>
+  )
+}