@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/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 * @experimental 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 *         subscriberType=\"org\"\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 `subscriberType=\"org\"` is used without an active organization context\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('Ensure that `<CheckoutButton />` is rendered inside a `<SignedIn />` component.');\n    }\n\n    if (orgId === null && _for === 'organization') {\n      throw new Error('Wrap `<CheckoutButton for=\"organization\" />` with a check for an active organization.');\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 * @experimental 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 * @see https://clerk.com/docs/billing/overview\n */\nexport const PlanDetailsButton = withClerk(\n  ({ clerk, children, ...props }: WithClerkProp<React.PropsWithChildren<__experimental_PlanDetailsButtonProps>>) => {\n    const { plan, planId, initialPlanPeriod, planDetailsProps, ...rest } = props;\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      });\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 * @experimental A button component that opens the Clerk Subscription Details 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 { 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=\"org\"\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=\"org\"` is used without an active organization context\n *\n * @see https://clerk.com/docs/billing/overview\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('Ensure that `<SubscriptionDetailsButton />` is rendered inside a `<SignedIn />` component.');\n    }\n\n    if (orgId === null && _for === 'organization') {\n      throw new Error(\n        'Wrap `<SubscriptionDetailsButton for=\"organization\" />` with a check for an active organization.',\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","export { CheckoutButton } from './components/CheckoutButton';\nexport { PlanDetailsButton } from './components/PlanDetailsButton';\nexport { SubscriptionDetailsButton } from './components/SubscriptionDetailsButton';\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"]}