@clerk/clerk-react/dist/experimental.mjs.map

Clerk React library

{"version":3,"sources":["../src/components/CheckoutButton.tsx","../src/components/PlanDetailsButton.tsx","../src/components/SubscriptionDetailsButton.tsx","../src/hooks/useClerkSignal.ts","../src/experimental.ts"],"sourcesContent":["import type { __experimental_CheckoutButtonProps } from '@clerk/types';\nimport React from 'react';\n\nimport { useAuth } from '../hooks';\nimport type { WithClerkProp } from '../types';\nimport { assertSingleChild, normalizeWithDefaultValue, safeExecute } from '../utils';\nimport { withClerk } from './withClerk';\n\n/**\n * A button component that opens the Clerk Checkout drawer when clicked. This component must be rendered\n * inside a `<SignedIn />` component to ensure the user is authenticated.\n *\n * @example\n * ```tsx\n * import { SignedIn } from '@clerk/clerk-react';\n * import { CheckoutButton } from '@clerk/clerk-react/experimental';\n *\n * // Basic usage with default \"Checkout\" text\n * function BasicCheckout() {\n *   return (\n *     <SignedIn>\n *       <CheckoutButton planId=\"plan_123\" />\n *     </SignedIn>\n *   );\n * }\n *\n * // Custom button with organization subscription\n * function OrganizationCheckout() {\n *   return (\n *     <SignedIn>\n *       <CheckoutButton\n *         planId=\"plan_123\"\n *         planPeriod=\"month\"\n *         for=\"organization\"\n *         onSubscriptionComplete={() => console.log('Subscription completed!')}\n *       >\n *         <button className=\"custom-button\">Subscribe Now</button>\n *       </CheckoutButton>\n *     </SignedIn>\n *   );\n * }\n * ```\n *\n * @throws {Error} When rendered outside of a `<SignedIn />` component\n * @throws {Error} When `for=\"organization\"` is used without an active organization context\n *\n * @experimental This is an experimental API for the Billing feature that is available under a public beta, and the API is subject to change. It is advised to [pin](https://clerk.com/docs/pinning) the SDK version and the clerk-js version to avoid breaking changes.\n */\nexport const CheckoutButton = withClerk(\n  ({ clerk, children, ...props }: WithClerkProp<React.PropsWithChildren<__experimental_CheckoutButtonProps>>) => {\n    const {\n      planId,\n      planPeriod,\n      for: _for,\n      onSubscriptionComplete,\n      newSubscriptionRedirectUrl,\n      checkoutProps,\n      ...rest\n    } = props;\n\n    const { userId, orgId } = useAuth();\n\n    if (userId === null) {\n      throw new Error('Clerk: Ensure that `<CheckoutButton />` is rendered inside a `<SignedIn />` component.');\n    }\n\n    if (orgId === null && _for === 'organization') {\n      throw new Error(\n        'Clerk: Wrap `<CheckoutButton for=\"organization\" />` with a check 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',\n      );\n    }\n\n    children = normalizeWithDefaultValue(children, 'Checkout');\n    const child = assertSingleChild(children)('CheckoutButton');\n\n    const clickHandler = () => {\n      if (!clerk) {\n        return;\n      }\n\n      return clerk.__internal_openCheckout({\n        planId,\n        planPeriod,\n        for: _for,\n        onSubscriptionComplete,\n        newSubscriptionRedirectUrl,\n        ...checkoutProps,\n      });\n    };\n\n    const wrappedChildClickHandler: React.MouseEventHandler = async e => {\n      if (child && typeof child === 'object' && 'props' in child) {\n        await safeExecute(child.props.onClick)(e);\n      }\n      return clickHandler();\n    };\n\n    const childProps = { ...rest, onClick: wrappedChildClickHandler };\n    return React.cloneElement(child as React.ReactElement<unknown>, childProps);\n  },\n  { component: 'CheckoutButton', renderWhileLoading: true },\n);\n","import type { __experimental_PlanDetailsButtonProps } from '@clerk/types';\nimport React from 'react';\n\nimport type { WithClerkProp } from '../types';\nimport { assertSingleChild, normalizeWithDefaultValue, safeExecute } from '../utils';\nimport { withClerk } from './withClerk';\n\n/**\n * A button component that opens the Clerk Plan Details drawer when clicked. This component is part of\n * Clerk's Billing feature which is available under a public beta.\n *\n * @example\n * ```tsx\n * import { SignedIn } from '@clerk/clerk-react';\n * import { PlanDetailsButton } from '@clerk/clerk-react/experimental';\n *\n * // Basic usage with default \"Plan details\" text\n * function BasicPlanDetails() {\n *   return (\n *     <PlanDetailsButton planId=\"plan_123\" />\n *   );\n * }\n *\n * // Custom button with custom text\n * function CustomPlanDetails() {\n *   return (\n *     <PlanDetailsButton planId=\"plan_123\">\n *       <button>View Plan Details</button>\n *     </PlanDetailsButton>\n *   );\n * }\n * ```\n *\n * @experimental This is an experimental API for the Billing feature that is available under a public beta, and the API is subject to change. It is advised to [pin](https://clerk.com/docs/pinning) the SDK version and the clerk-js version to avoid breaking changes.\n */\nexport const PlanDetailsButton = withClerk(\n  ({ clerk, children, ...props }: WithClerkProp<React.PropsWithChildren<__experimental_PlanDetailsButtonProps>>) => {\n    const { plan, planId, initialPlanPeriod, planDetailsProps, ...rest } = props;\n\n    children = normalizeWithDefaultValue(children, 'Plan details');\n    const child = assertSingleChild(children)('PlanDetailsButton');\n\n    const clickHandler = () => {\n      if (!clerk) {\n        return;\n      }\n\n      return clerk.__internal_openPlanDetails({\n        plan,\n        planId,\n        initialPlanPeriod,\n        ...planDetailsProps,\n      } as __experimental_PlanDetailsButtonProps);\n    };\n\n    const wrappedChildClickHandler: React.MouseEventHandler = async e => {\n      if (child && typeof child === 'object' && 'props' in child) {\n        await safeExecute(child.props.onClick)(e);\n      }\n      return clickHandler();\n    };\n\n    const childProps = { ...rest, onClick: wrappedChildClickHandler };\n    return React.cloneElement(child as React.ReactElement<unknown>, childProps);\n  },\n  { component: 'PlanDetailsButton', renderWhileLoading: true },\n);\n","import type { __experimental_SubscriptionDetailsButtonProps } from '@clerk/types';\nimport React from 'react';\n\nimport { useAuth } from '../hooks';\nimport type { WithClerkProp } from '../types';\nimport { assertSingleChild, normalizeWithDefaultValue, safeExecute } from '../utils';\nimport { withClerk } from './withClerk';\n\n/**\n * A button component that opens the Clerk Subscription Details drawer when clicked. This component must be rendered inside a `<SignedIn />` component to ensure the user is authenticated.\n *\n * @example\n * ```tsx\n * import { SignedIn } from '@clerk/clerk-react';\n * import { SubscriptionDetailsButton } from '@clerk/clerk-react/experimental';\n *\n * // Basic usage with default \"Subscription details\" text\n * function BasicSubscriptionDetails() {\n *   return (\n *     <SubscriptionDetailsButton />\n *   );\n * }\n *\n * // Custom button with organization subscription\n * function OrganizationSubscriptionDetails() {\n *   return (\n *     <SubscriptionDetailsButton\n *       for=\"organization\"\n *       onSubscriptionCancel={() => console.log('Subscription canceled')}\n *     >\n *       <button>View Organization Subscription</button>\n *     </SubscriptionDetailsButton>\n *   );\n * }\n * ```\n *\n * @throws {Error} When rendered outside of a `<SignedIn />` component\n * @throws {Error} When `for=\"organization\"` is used without an active organization context\n *\n * @experimental This is an experimental API for the Billing feature that is available under a public beta, and the API is subject to change. It is advised to [pin](https://clerk.com/docs/pinning) the SDK version and the clerk-js version to avoid breaking changes.\n */\nexport const SubscriptionDetailsButton = withClerk(\n  ({\n    clerk,\n    children,\n    ...props\n  }: WithClerkProp<React.PropsWithChildren<__experimental_SubscriptionDetailsButtonProps>>) => {\n    const { for: _for, subscriptionDetailsProps, onSubscriptionCancel, ...rest } = props;\n    children = normalizeWithDefaultValue(children, 'Subscription details');\n    const child = assertSingleChild(children)('SubscriptionDetailsButton');\n\n    const { userId, orgId } = useAuth();\n\n    if (userId === null) {\n      throw new Error(\n        'Clerk: Ensure that `<SubscriptionDetailsButton />` is rendered inside a `<SignedIn />` component.',\n      );\n    }\n\n    if (orgId === null && _for === 'organization') {\n      throw new Error(\n        'Clerk: Wrap `<SubscriptionDetailsButton for=\"organization\" />` with a check 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',\n      );\n    }\n\n    const clickHandler = () => {\n      if (!clerk) {\n        return;\n      }\n\n      return clerk.__internal_openSubscriptionDetails({\n        for: _for,\n        onSubscriptionCancel,\n        ...subscriptionDetailsProps,\n      });\n    };\n\n    const wrappedChildClickHandler: React.MouseEventHandler = async e => {\n      if (child && typeof child === 'object' && 'props' in child) {\n        await safeExecute(child.props.onClick)(e);\n      }\n      return clickHandler();\n    };\n\n    const childProps = { ...rest, onClick: wrappedChildClickHandler };\n    return React.cloneElement(child as React.ReactElement<unknown>, childProps);\n  },\n  { component: 'SubscriptionDetailsButton', renderWhileLoading: true },\n);\n","import type { SignInSignalValue, SignUpSignalValue } from '@clerk/types';\nimport { useCallback, useSyncExternalStore } from 'react';\n\nimport { useIsomorphicClerkContext } from '../contexts/IsomorphicClerkContext';\nimport { useAssertWrappedByClerkProvider } from './useAssertWrappedByClerkProvider';\n\nfunction useClerkSignal(signal: 'signIn'): SignInSignalValue;\nfunction useClerkSignal(signal: 'signUp'): SignUpSignalValue;\nfunction useClerkSignal(signal: 'signIn' | 'signUp'): SignInSignalValue | SignUpSignalValue {\n  useAssertWrappedByClerkProvider('useClerkSignal');\n\n  const clerk = useIsomorphicClerkContext();\n\n  const subscribe = useCallback(\n    (callback: () => void) => {\n      if (!clerk.loaded) {\n        return () => {};\n      }\n\n      return clerk.__internal_state.__internal_effect(() => {\n        switch (signal) {\n          case 'signIn':\n            clerk.__internal_state.signInSignal();\n            break;\n          case 'signUp':\n            clerk.__internal_state.signUpSignal();\n            break;\n          default:\n            throw new Error(`Unknown signal: ${signal}`);\n        }\n        callback();\n      });\n    },\n    [clerk, clerk.loaded, clerk.__internal_state],\n  );\n  const getSnapshot = useCallback(() => {\n    switch (signal) {\n      case 'signIn':\n        return clerk.__internal_state.signInSignal() as SignInSignalValue;\n      case 'signUp':\n        return clerk.__internal_state.signUpSignal() as SignUpSignalValue;\n      default:\n        throw new Error(`Unknown signal: ${signal}`);\n    }\n  }, [clerk.__internal_state]);\n\n  const value = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n\n  return value;\n}\n\n/**\n * This hook allows you to access the Signal-based `SignIn` resource.\n *\n * @example\n * import { useSignInSignal } from \"@clerk/clerk-react/experimental\";\n *\n * function SignInForm() {\n *   const { signIn, errors, fetchStatus } = useSignInSignal();\n *   //\n * }\n *\n * @experimental This experimental API is subject to change.\n */\nexport function useSignInSignal() {\n  return useClerkSignal('signIn');\n}\n\n/**\n * This hook allows you to access the Signal-based `SignUp` resource.\n *\n * @example\n * import { useSignUpSignal } from \"@clerk/clerk-react/experimental\";\n *\n * function SignUpForm() {\n *   const { signUp, errors, fetchStatus } = useSignUpSignal();\n *   //\n * }\n *\n * @experimental This experimental API is subject to change.\n */\nexport function useSignUpSignal() {\n  return useClerkSignal('signUp');\n}\n","export { CheckoutButton } from './components/CheckoutButton';\nexport { PlanDetailsButton } from './components/PlanDetailsButton';\nexport { SubscriptionDetailsButton } from './components/SubscriptionDetailsButton';\nexport { useSignInSignal, useSignUpSignal } from './hooks/useClerkSignal';\n\nexport type {\n  __experimental_CheckoutButtonProps as CheckoutButtonProps,\n  __experimental_SubscriptionDetailsButtonProps as SubscriptionDetailsButtonProps,\n  __experimental_PlanDetailsButtonProps as PlanDetailsButtonProps,\n} from '@clerk/types';\n\nexport {\n  __experimental_PaymentElementProvider as PaymentElementProvider,\n  __experimental_usePaymentElement as usePaymentElement,\n  __experimental_PaymentElement as PaymentElement,\n  __experimental_usePaymentAttempts as usePaymentAttempts,\n  __experimental_useStatements as useStatements,\n  __experimental_usePaymentMethods as usePaymentMethods,\n  __experimental_usePlans as usePlans,\n  __experimental_useSubscription as useSubscription,\n  __experimental_CheckoutProvider as CheckoutProvider,\n  __experimental_useCheckout as useCheckout,\n} from '@clerk/shared/react';\n"],"mappings":"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","names":["React","React","React","React"]}