Pull billing components from @kittycad/react-shared (#8094)

Author: pierremtb

e2e/playwright/snapshot-tests.spec.ts-snapshots/Draft-circle-should-look-right-1-Google-Chrome-linux.png

@@ -33,6 +33,7 @@
     "@headlessui/react": "^1.7.19",
     "@headlessui/tailwindcss": "^0.2.2",
     "@kittycad/lib": "^2.0.46",
+    "@kittycad/react-shared": "^0.1.4",
     "@lezer/highlight": "^1.2.1",
     "@lezer/lr": "^1.4.1",
     "@microlink/react-json-view": "^1.27.0",

package-lock.json

@@ -3,11 +3,11 @@ import type { Location } from 'react-router-dom'
 import { PATHS } from '@src/lib/paths'
 import { APP_VERSION, getReleaseUrl } from '@src/routes/utils'
 import {
+  BillingDialog,
   BillingRemaining,
   BillingRemainingMode,
-} from '@src/components/BillingRemaining'
+} from '@kittycad/react-shared'
 import { billingActor } from '@src/lib/singletons'
-import { BillingDialog } from '@src/components/BillingDialog'
 import { Popover } from '@headlessui/react'
 import Tooltip from '@src/components/Tooltip'
 import { HelpMenu } from '@src/components/HelpMenu'
@@ -19,6 +19,8 @@ import {
   EnvironmentChip,
   EnvironmentDescription,
 } from '@src/components/environment/Environment'
+import { useSelector } from '@xstate/react'
+import { openExternalBrowserIfDesktop } from '@src/lib/openWindow'
 
 export const defaultGlobalStatusBarItems = ({
   location,
@@ -83,6 +85,7 @@ export const defaultGlobalStatusBarItems = ({
 ]
 
 function BillingStatusBarItem() {
+  const billingContext = useSelector(billingActor, ({ context }) => context)
   return (
     <Popover className="relative flex items-stretch">
       <Popover.Button
@@ -91,7 +94,9 @@ function BillingStatusBarItem() {
       >
         <BillingRemaining
           mode={BillingRemainingMode.ProgressBarFixed}
-          billingActor={billingActor}
+          error={billingContext.error}
+          credits={billingContext.credits}
+          allowance={billingContext.allowance}
         />
         <Tooltip
           position="top"
@@ -103,7 +108,13 @@ function BillingStatusBarItem() {
         </Tooltip>
       </Popover.Button>
       <Popover.Panel className="absolute left-0 bottom-full mb-1 w-64 flex flex-col gap-1 align-stretch rounded-lg shadow-lg text-sm">
-        <BillingDialog billingActor={billingActor} />
+        <BillingDialog
+          upgradeHref={withSiteBaseURL('/design-studio-pricing')}
+          upgradeClick={openExternalBrowserIfDesktop()}
+          error={billingContext.error}
+          credits={billingContext.credits}
+          allowance={billingContext.allowance}
+        />
       </Popover.Panel>
     </Popover>
   )

package.json

@@ -14,10 +14,8 @@ import { setupServer } from 'msw/node'
 // React and XState code to test
 import type { Models } from '@kittycad/lib'
 import { createActor } from 'xstate'
-import {
-  BillingRemaining,
-  BillingRemainingMode,
-} from '@src/components/BillingRemaining'
+import { useSelector } from '@xstate/react'
+import { BillingRemaining, BillingRemainingMode } from '@kittycad/react-shared'
 import {
   BILLING_CONTEXT_DEFAULTS,
   billingMachine,
@@ -100,6 +98,18 @@ const createUserPaymentSubscriptionsResponse = (opts: {
   },
 })
 
+function BillingRemainingWithSelector({ billingActor, mode }) {
+  const billingContext = useSelector(billingActor, ({ context }) => context)
+  return (
+    <BillingRemaining
+      mode={mode}
+      error={billingContext.error}
+      credits={billingContext.credits}
+      allowance={billingContext.allowance}
+    />
+  )
+}
+
 test('Shows a loading spinner when uninitialized credit count', async () => {
   server.use(
     http.get('*/user/payment/balance', (req, res, ctx) => {
@@ -118,10 +128,7 @@ test('Shows a loading spinner when uninitialized credit count', async () => {
   }).start()
 
   const { queryByTestId } = render(
-    <BillingRemaining
-      mode={BillingRemainingMode.ProgressBarFixed}
-      billingActor={billingActor}
-    />
+    <BillingRemainingWithSelector billingActor={billingActor} />
   )
 
   await expect(queryByTestId('spinner')).toBeVisible()
@@ -158,7 +165,7 @@ test('Shows the total credits for Unknown subscription', async () => {
   }).start()
 
   const { queryByTestId } = render(
-    <BillingRemaining
+    <BillingRemainingWithSelector
       mode={BillingRemainingMode.ProgressBarFixed}
       billingActor={billingActor}
     />
@@ -209,7 +216,7 @@ test('Progress bar reflects ratio left of Free subscription', async () => {
   }).start()
 
   const { queryByTestId } = render(
-    <BillingRemaining
+    <BillingRemainingWithSelector
       mode={BillingRemainingMode.ProgressBarFixed}
       billingActor={billingActor}
     />
@@ -270,7 +277,7 @@ test('Shows infinite credits for Pro subscription', async () => {
   }).start()
 
   const { queryByTestId } = render(
-    <BillingRemaining
+    <BillingRemainingWithSelector
       mode={BillingRemainingMode.ProgressBarFixed}
       billingActor={billingActor}
     />
@@ -326,7 +333,7 @@ test('Shows infinite credits for Enterprise subscription', async () => {
   }).start()
 
   const { queryByTestId } = render(
-    <BillingRemaining
+    <BillingRemainingWithSelector
       mode={BillingRemainingMode.ProgressBarFixed}
       billingActor={billingActor}
     />