🚸 (billing) Make sure customer is not created before launching checkout page

apps/builder/src/features/billing/components/BillingSettingsLayout.tsx

@@ -8,7 +8,7 @@ import { UsageProgressBars } from './UsageProgressBars'
 import { CurrentSubscriptionSummary } from './CurrentSubscriptionSummary'
 
 export const BillingSettingsLayout = () => {
-  const { workspace, refreshWorkspace } = useWorkspace()
+  const { workspace } = useWorkspace()
 
   if (!workspace) return null
   return (
@@ -20,10 +20,7 @@ export const BillingSettingsLayout = () => {
           workspace.plan !== Plan.LIFETIME &&
           workspace.plan !== Plan.UNLIMITED &&
           workspace.plan !== Plan.OFFERED && (
-            <ChangePlanForm
-              workspace={workspace}
-              onUpgradeSuccess={refreshWorkspace}
-            />
+            <ChangePlanForm workspace={workspace} />
           )}
       </Stack>
 

apps/builder/src/features/billing/components/ChangePlanForm.tsx

@@ -16,10 +16,9 @@ import { StripeClimateLogo } from './StripeClimateLogo'
 
 type Props = {
   workspace: Workspace
-  onUpgradeSuccess: () => void
 }
 
-export const ChangePlanForm = ({ workspace, onUpgradeSuccess }: Props) => {
+export const ChangePlanForm = ({ workspace }: Props) => {
   const scopedT = useScopedI18n('billing')
 
   const { user } = useUser()
@@ -28,7 +27,9 @@ export const ChangePlanForm = ({ workspace, onUpgradeSuccess }: Props) => {
     useState<PreCheckoutModalProps['selectedSubscription']>()
   const [isYearly, setIsYearly] = useState(true)
 
-  const { data } = trpc.billing.getSubscription.useQuery(
+  const trpcContext = trpc.useContext()
+
+  const { data, refetch } = trpc.billing.getSubscription.useQuery(
     {
       workspaceId: workspace.id,
     },
@@ -52,7 +53,8 @@ export const ChangePlanForm = ({ workspace, onUpgradeSuccess }: Props) => {
           window.location.href = checkoutUrl
           return
         }
-        onUpgradeSuccess()
+        refetch()
+        trpcContext.workspace.getWorkspace.invalidate()
         showToast({
           status: 'success',
           description: scopedT('updateSuccessToast.description', {

apps/builder/src/features/billing/components/ChangePlanModal.tsx

@@ -25,7 +25,7 @@ export const ChangePlanModal = ({
   type,
 }: ChangePlanModalProps) => {
   const t = useI18n()
-  const { workspace, refreshWorkspace } = useWorkspace()
+  const { workspace } = useWorkspace()
   return (
     <Modal isOpen={isOpen} onClose={onClose} size="2xl">
       <ModalOverlay />
@@ -36,12 +36,7 @@ export const ChangePlanModal = ({
               {t('billing.upgradeLimitLabel', { type: type })}
             </AlertInfo>
           )}
-          {workspace && (
-            <ChangePlanForm
-              workspace={workspace}
-              onUpgradeSuccess={refreshWorkspace}
-            />
-          )}
+          {workspace && <ChangePlanForm workspace={workspace} />}
         </ModalBody>
 
         <ModalFooter>