feat: animate height of switch (#7263)

Co-authored-by: Laura Beatris <[email protected]>

Author: alexcarpenter

packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx

@@ -11,7 +11,7 @@ import { Modal } from '@/ui/elements/Modal';
 import { common, InternalThemeProvider } from '@/ui/styledSystem';
 
 import { DevTools } from '../../../../core/resources/DevTools';
-import { Flex, Span } from '../../../customizables';
+import { Box, Flex, Span } from '../../../customizables';
 import { Portal } from '../../../elements/Portal';
 import { basePromptElementStyles, handleDashboardUrlParsing, PromptContainer, PromptSuccessIcon } from '../shared';
 
@@ -291,15 +291,35 @@ const EnableOrganizationsPromptInternal = ({
               )}
             </Flex>
 
-            {!isEnabled && hasPersonalAccountsEnabled && (
-              <Flex sx={t => ({ marginTop: t.sizes.$3 })}>
-                <Switch
-                  label='Allow personal account'
-                  description='This is an uncommon setting, meant for applications that sell to both organizations and individual users. Most B2B applications require users to be part of an organization, and should keep this setting disabled.'
-                  checked={allowPersonalAccount}
-                  onChange={() => setAllowPersonalAccount(prev => !prev)}
-                />
-              </Flex>
+            {hasPersonalAccountsEnabled && (
+              <Box
+                sx={t => ({
+                  display: 'grid',
+                  gridTemplateRows: isEnabled ? '0fr' : '1fr',
+                  transition: `grid-template-rows ${t.transitionDuration.$slower} ${t.transitionTiming.$slowBezier}`,
+                  marginInline: '-0.5rem',
+                  overflow: 'hidden',
+                })}
+                {...(isEnabled && { inert: '' })}
+              >
+                <Flex
+                  sx={t => ({
+                    minHeight: 0,
+                    paddingInline: '0.5rem',
+                    opacity: isEnabled ? 0 : 1,
+                    transition: `opacity ${t.transitionDuration.$slower} ${t.transitionTiming.$slowBezier}`,
+                  })}
+                >
+                  <Flex sx={t => ({ marginTop: t.sizes.$2 })}>
+                    <Switch
+                      label='Allow personal account'
+                      description='Allow users to work outside of an organization by providing a personal account. We do not recommend for B2B SaaS apps.'
+                      checked={allowPersonalAccount}
+                      onChange={() => setAllowPersonalAccount(prev => !prev)}
+                    />
+                  </Flex>
+                </Flex>
+              </Box>
             )}
           </Flex>
 

packages/shared/src/react/hooks/useCheckout.ts

@@ -134,15 +134,15 @@ export const useCheckout = (options?: UseCheckoutParams): __experimental_UseChec
     throw new Error('Clerk: Ensure that `useCheckout` is inside a component wrapped with `<SignedIn />`.');
   }
 
-  if (forOrganization === 'organization' && !organizationCtx.organization) {
+  if (forOrganization === 'organization' && !organizationCtx?.organization) {
     throw new Error(
       'Clerk: Ensure your flow checks for an active organization. Retrieve `orgId` from `useAuth()` and confirm it is defined. For SSR, see: https://clerk.com/docs/reference/backend/types/auth-object#how-to-access-the-auth-object',
     );
   }
 
   const manager = useMemo(
     () => clerk.__experimental_checkout({ planId, planPeriod, for: forOrganization }),
-    [user.id, organizationCtx.organization?.id, planId, planPeriod, forOrganization],
+    [user.id, organizationCtx?.organization?.id, planId, planPeriod, forOrganization],
   );
 
   const managerProperties = useSyncExternalStore(