npm - @clerk/ui - Versions diffs - 1.0.0-snapshot.v20251204175016 → 1.0.0-snapshot.v20251208202852 - Mend

@clerk/ui 1.0.0-snapshot.v20251204175016 → 1.0.0-snapshot.v20251208202852

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (138) hide show

package/dist/components/Checkout/CheckoutForm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CheckoutForm.js","names":["useCheckout","InformationCircle","AddPaymentMethod.Root","AddPaymentMethod.FormButton","formProps: ThemableCssProp","ChevronUpDown"],"sources":["../../../src/components/Checkout/CheckoutForm.tsx"],"sourcesContent":["import { __experimental_useCheckout as useCheckout } from '@clerk/shared/react';\nimport type { BillingPaymentMethodResource, ConfirmCheckoutParams, RemoveFunctions } from '@clerk/shared/types';\nimport { useMemo, useState } from 'react';\n\nimport { Card } from '@/ui/elements/Card';\nimport { useCardState, withCardStateProvider } from '@/ui/elements/contexts';\nimport { Drawer } from '@/ui/elements/Drawer';\nimport { LineItems } from '@/ui/elements/LineItems';\nimport { SegmentedControl } from '@/ui/elements/SegmentedControl';\nimport { Select, SelectButton, SelectOptionList } from '@/ui/elements/Select';\nimport { Tooltip } from '@/ui/elements/Tooltip';\nimport { handleError } from '@/ui/utils/errorHandler';\n\nimport { DevOnly } from '../../common/DevOnly';\nimport { useCheckoutContext, usePaymentMethods } from '../../contexts';\nimport { Box, Button, Col, descriptors, Flex, Form, localizationKeys, Spinner, Text } from '../../customizables';\nimport { ChevronUpDown, InformationCircle } from '../../icons';\nimport type { PropsOfComponent, ThemableCssProp } from '../../styledSystem';\nimport * as AddPaymentMethod from '../PaymentMethods/AddPaymentMethod';\nimport { PaymentMethodRow } from '../PaymentMethods/PaymentMethodRow';\nimport { SubscriptionBadge } from '../Subscriptions/badge';\n\ntype PaymentMethodSource = 'existing' \| 'new';\n\nconst capitalize = (name: string) => name[0].toUpperCase() + name.slice(1);\n\nconst HIDDEN_INPUT_NAME = 'payment_method_id';\n\nexport const CheckoutForm = withCardStateProvider(() => {\n const { checkout } = useCheckout();\n\n const { plan, totals, isImmediatePlanChange, planPeriod, freeTrialEndsAt } = checkout;\n\n if (!plan) {\n return null;\n }\n\n const showCredits = !!totals.credit?.amount && totals.credit.amount > 0;\n const showPastDue = !!totals.pastDue?.amount && totals.pastDue.amount > 0;\n const showDowngradeInfo = !isImmediatePlanChange;\n\n const fee =\n planPeriod === 'month'\n ? plan.fee\n : // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n plan.annualMonthlyFee!;\n\n return (\n <Drawer.Body>\n <Box\n elementDescriptor={descriptors.checkoutFormLineItemsRoot}\n sx={t => ({\n padding: t.space.$4,\n borderBottomWidth: t.borderWidths.$normal,\n borderBottomStyle: t.borderStyles.$solid,\n borderBottomColor: t.colors.$borderAlpha100,\n })}\n >\n <LineItems.Root>\n <LineItems.Group>\n <LineItems.Title\n title={plan.name}\n description={planPeriod === 'annual' ? localizationKeys('billing.billedAnnually') : undefined}\n badge={\n plan.freeTrialEnabled && freeTrialEndsAt ? (\n <SubscriptionBadge subscription={{ status: 'free_trial' }} />\n ) : null\n }\n />\n <LineItems.Description\n prefix={planPeriod === 'annual' ? 'x12' : undefined}\n text={`${fee.currencySymbol}${fee.amountFormatted}`}\n suffix={localizationKeys('billing.checkout.perMonth')}\n />\n </LineItems.Group>\n <LineItems.Group\n borderTop\n variant='tertiary'\n >\n <LineItems.Title title={localizationKeys('billing.subtotal')} />\n <LineItems.Description text={`${totals.subtotal.currencySymbol}${totals.subtotal.amountFormatted}`} />\n </LineItems.Group>\n {showCredits && (\n <LineItems.Group variant='tertiary'>\n <LineItems.Title title={localizationKeys('billing.creditRemainder')} />\n <LineItems.Description text={`- ${totals.credit?.currencySymbol}${totals.credit?.amountFormatted}`} />\n </LineItems.Group>\n )}\n {showPastDue && (\n <LineItems.Group variant='tertiary'>\n <Tooltip.Root>\n <Tooltip.Trigger>\n <LineItems.Title\n title={localizationKeys('billing.pastDue')}\n icon={InformationCircle}\n />\n </Tooltip.Trigger>\n <Tooltip.Content text={localizationKeys('billing.checkout.pastDueNotice')} />\n </Tooltip.Root>\n <LineItems.Description text={`${totals.pastDue?.currencySymbol}${totals.pastDue?.amountFormatted}`} />\n </LineItems.Group>\n )}\n\n {!!freeTrialEndsAt && !!plan.freeTrialDays && totals.totalDueAfterFreeTrial && (\n <LineItems.Group variant='tertiary'>\n <LineItems.Title\n title={localizationKeys('billing.checkout.totalDueAfterTrial', {\n days: plan.freeTrialDays,\n })}\n />\n <LineItems.Description\n text={`${totals.totalDueAfterFreeTrial.currencySymbol}${totals.totalDueAfterFreeTrial.amountFormatted}`}\n />\n </LineItems.Group>\n )}\n\n <LineItems.Group borderTop>\n <LineItems.Title title={localizationKeys('billing.totalDueToday')} />\n <LineItems.Description text={`${totals.totalDueNow.currencySymbol}${totals.totalDueNow.amountFormatted}`} />\n </LineItems.Group>\n </LineItems.Root>\n </Box>\n\n {showDowngradeInfo && (\n <Box\n elementDescriptor={descriptors.checkoutFormLineItemsRoot}\n sx={t => ({\n paddingBlockStart: t.space.$4,\n paddingInline: t.space.$4,\n })}\n >\n <Text\n localizationKey={localizationKeys('billing.checkout.downgradeNotice')}\n variant='caption'\n colorScheme='secondary'\n />\n </Box>\n )}\n\n <CheckoutFormElements />\n </Drawer.Body>\n );\n});\n\nconst useCheckoutMutations = () => {\n const { onSubscriptionComplete } = useCheckoutContext();\n const { checkout } = useCheckout();\n const card = useCardState();\n\n if (checkout.status !== 'needs_confirmation') {\n throw new Error('Checkout not found');\n }\n\n const confirmCheckout = async (params: ConfirmCheckoutParams) => {\n card.setLoading();\n card.setError(undefined);\n\n const { error } = await checkout.confirm(params);\n\n if (error) {\n handleError(error, [], card.setError);\n } else {\n onSubscriptionComplete?.();\n }\n card.setIdle();\n };\n\n const payWithExistingPaymentMethod = (e: React.FormEvent<HTMLFormElement>) => {\n e.preventDefault();\n\n const data = new FormData(e.currentTarget);\n const paymentMethodId = data.get(HIDDEN_INPUT_NAME) as string;\n\n return confirmCheckout({\n paymentMethodId,\n });\n };\n\n const payWithoutPaymentMethod = (e: React.FormEvent<HTMLFormElement>) => {\n e.preventDefault();\n return confirmCheckout({});\n };\n\n const addPaymentMethodAndPay = (ctx: { gateway: 'stripe'; paymentToken: string }) => confirmCheckout(ctx);\n\n const payWithTestCard = () =>\n confirmCheckout({\n gateway: 'stripe',\n useTestCard: true,\n });\n\n return {\n payWithExistingPaymentMethod,\n addPaymentMethodAndPay,\n payWithTestCard,\n payWithoutPaymentMethod,\n };\n};\n\nconst CheckoutFormElements = () => {\n const { checkout } = useCheckout();\n const { plan } = checkout;\n\n const { isLoading } = usePaymentMethods();\n\n if (!plan) {\n return null;\n }\n\n if (isLoading) {\n return (\n <Spinner\n sx={{\n margin: 'auto',\n }}\n />\n );\n }\n\n return <CheckoutFormElementsInternal />;\n};\n\nconst CheckoutFormElementsInternal = () => {\n const { checkout } = useCheckout();\n const { plan, isImmediatePlanChange, needsPaymentMethod } = checkout;\n const { data: paymentMethods } = usePaymentMethods();\n\n const [paymentMethodSource, setPaymentMethodSource] = useState<PaymentMethodSource>(() =>\n paymentMethods.length > 0 \|\| __BUILD_DISABLE_RHC__ ? 'existing' : 'new',\n );\n\n const showTabs = isImmediatePlanChange && needsPaymentMethod;\n\n if (!plan) {\n return null;\n }\n\n return (\n <Col\n elementDescriptor={descriptors.checkoutFormElementsRoot}\n gap={4}\n sx={t => ({ padding: t.space.$4 })}\n >\n {__BUILD_DISABLE_RHC__ ? null : (\n <>\n {paymentMethods.length > 0 && showTabs && (\n <SegmentedControl.Root\n aria-label='Payment method source'\n value={paymentMethodSource}\n onChange={value => setPaymentMethodSource(value as PaymentMethodSource)}\n size='lg'\n fullWidth\n >\n <SegmentedControl.Button\n value='existing'\n text={localizationKeys('billing.paymentMethods__label')}\n />\n <SegmentedControl.Button\n value='new'\n text={localizationKeys('billing.addPaymentMethod__label')}\n />\n </SegmentedControl.Root>\n )}\n </>\n )}\n\n {!needsPaymentMethod ? (\n <FreeTrialButton />\n ) : paymentMethodSource === 'existing' ? (\n <ExistingPaymentMethodForm paymentMethods={paymentMethods} />\n ) : (\n !__BUILD_DISABLE_RHC__ && paymentMethodSource === 'new' && <AddPaymentMethodForCheckout />\n )}\n </Col>\n );\n};\n\nexport const PayWithTestPaymentMethod = () => {\n const { isLoading } = useCardState();\n const { payWithTestCard } = useCheckoutMutations();\n\n return (\n <Box\n sx={t => ({\n background: t.colors.$neutralAlpha50,\n padding: t.space.$2x5,\n borderRadius: t.radii.$md,\n borderWidth: t.borderWidths.$normal,\n borderStyle: t.borderStyles.$solid,\n borderColor: t.colors.$borderAlpha100,\n display: 'flex',\n flexDirection: 'column',\n rowGap: t.space.$2,\n position: 'relative',\n })}\n >\n <Box\n sx={t => ({\n position: 'absolute',\n inset: 0,\n background: `repeating-linear-gradient(-45deg,${t.colors.$warningAlpha100},${t.colors.$warningAlpha100} 6px,${t.colors.$warningAlpha150} 6px,${t.colors.$warningAlpha150} 12px)`,\n maskImage: `linear-gradient(transparent 20%, black)`,\n pointerEvents: 'none',\n })}\n />\n <Flex\n sx={t => ({\n alignItems: 'center',\n justifyContent: 'center',\n flexDirection: 'column',\n rowGap: t.space.$2,\n })}\n >\n <Text\n sx={t => ({\n color: t.colors.$warning500,\n fontWeight: t.fontWeights.$semibold,\n })}\n localizationKey={localizationKeys('billing.paymentMethod.dev.developmentMode')}\n />\n <Button\n type='button'\n block\n variant='bordered'\n localizationKey={localizationKeys('userProfile.billingPage.paymentMethodsSection.payWithTestCardButton')}\n colorScheme='secondary'\n isLoading={isLoading}\n onClick={payWithTestCard}\n />\n </Flex>\n </Box>\n );\n};\n\nconst useSubmitLabel = () => {\n const { checkout } = useCheckout();\n const { status, freeTrialEndsAt, totals } = checkout;\n\n if (status === 'needs_initialization') {\n throw new Error('Clerk: Invalid state');\n }\n\n if (freeTrialEndsAt) {\n return localizationKeys('billing.startFreeTrial');\n }\n\n if (totals.totalDueNow.amount > 0) {\n return localizationKeys('billing.pay', {\n amount: `${totals.totalDueNow.currencySymbol}${totals.totalDueNow.amountFormatted}`,\n });\n }\n\n return localizationKeys('billing.subscribe');\n};\n\nconst FreeTrialButton = withCardStateProvider(() => {\n const { for: _for } = useCheckoutContext();\n const { payWithoutPaymentMethod } = useCheckoutMutations();\n const card = useCardState();\n\n return (\n <Form\n onSubmit={payWithoutPaymentMethod}\n sx={formProps}\n >\n <Card.Alert>{card.error}</Card.Alert>\n <CheckoutSubmitButton />\n </Form>\n );\n});\n\nconst AddPaymentMethodForCheckout = withCardStateProvider(() => {\n const { addPaymentMethodAndPay } = useCheckoutMutations();\n const submitLabel = useSubmitLabel();\n const { checkout } = useCheckout();\n\n return (\n <AddPaymentMethod.Root\n onSuccess={addPaymentMethodAndPay}\n checkout={checkout}\n >\n <DevOnly>\n <PayWithTestPaymentMethod />\n </DevOnly>\n\n <AddPaymentMethod.FormButton text={submitLabel} />\n </AddPaymentMethod.Root>\n );\n});\n\nconst CheckoutSubmitButton = (props: PropsOfComponent<typeof Button>) => {\n const card = useCardState();\n const submitLabel = useSubmitLabel();\n\n return (\n <Button\n type='submit'\n colorScheme='primary'\n size='sm'\n textVariant={'buttonLarge'}\n sx={{\n width: '100%',\n }}\n isLoading={card.isLoading}\n localizationKey={submitLabel}\n {...props}\n />\n );\n};\n\nconst formProps: ThemableCssProp = t => ({\n display: 'flex',\n flexDirection: 'column',\n rowGap: t.space.$4,\n});\n\nconst ExistingPaymentMethodForm = withCardStateProvider(\n ({ paymentMethods }: { paymentMethods: BillingPaymentMethodResource[] }) => {\n const { checkout } = useCheckout();\n const { paymentMethod, isImmediatePlanChange, needsPaymentMethod } = checkout;\n\n const { payWithExistingPaymentMethod } = useCheckoutMutations();\n const card = useCardState();\n const [selectedPaymentMethod, setSelectedPaymentMethod] = useState<\n RemoveFunctions<BillingPaymentMethodResource> \| undefined\n >(paymentMethod \|\| paymentMethods.find(p => p.isDefault));\n\n const options = useMemo(() => {\n return paymentMethods.map(method => {\n const label =\n method.paymentType !== 'card'\n ? method.paymentType\n ? `${capitalize(method.paymentType)}`\n : '–'\n : method.cardType\n ? `${capitalize(method.cardType)} ⋯ ${method.last4}`\n : '–';\n\n return {\n value: method.id,\n label,\n };\n });\n }, [paymentMethods]);\n\n const showPaymentMethods = isImmediatePlanChange && needsPaymentMethod;\n\n return (\n <Form\n onSubmit={payWithExistingPaymentMethod}\n sx={formProps}\n >\n {showPaymentMethods ? (\n <Select\n elementId='paymentMethod'\n options={options}\n value={selectedPaymentMethod?.id \|\| null}\n onChange={option => {\n const paymentMethod = paymentMethods.find(source => source.id === option.value);\n setSelectedPaymentMethod(paymentMethod);\n }}\n portal\n >\n {/Store value inside an input in order to be accessible as form data/}\n <input\n name={HIDDEN_INPUT_NAME}\n type='hidden'\n value={selectedPaymentMethod?.id}\n />\n <SelectButton\n icon={ChevronUpDown}\n sx={t => ({\n justifyContent: 'space-between',\n backgroundColor: t.colors.$colorBackground,\n })}\n >\n {selectedPaymentMethod && <PaymentMethodRow paymentMethod={selectedPaymentMethod} />}\n </SelectButton>\n <SelectOptionList\n sx={t => ({\n paddingBlock: t.space.$1,\n color: t.colors.$colorForeground,\n })}\n />\n </Select>\n ) : (\n <input\n name={HIDDEN_INPUT_NAME}\n type='hidden'\n value={selectedPaymentMethod?.id}\n />\n )}\n <Card.Alert>{card.error}</Card.Alert>\n <CheckoutSubmitButton />\n </Form>\n );\n },\n);\n"],"mappings":"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"}
1	+ {"version":3,"file":"CheckoutForm.js","names":["useCheckout","InformationCircle","AddPaymentMethod.Root","AddPaymentMethod.FormButton","formProps: ThemableCssProp","ChevronUpDown"],"sources":["../../../src/components/Checkout/CheckoutForm.tsx"],"sourcesContent":["import { __experimental_useCheckout as useCheckout } from '@clerk/shared/react';\nimport type { BillingPaymentMethodResource, ConfirmCheckoutParams, RemoveFunctions } from '@clerk/shared/types';\nimport { useMemo, useState } from 'react';\n\nimport { Card } from '@/ui/elements/Card';\nimport { useCardState, withCardStateProvider } from '@/ui/elements/contexts';\nimport { Drawer } from '@/ui/elements/Drawer';\nimport { LineItems } from '@/ui/elements/LineItems';\nimport { SegmentedControl } from '@/ui/elements/SegmentedControl';\nimport { Select, SelectButton, SelectOptionList } from '@/ui/elements/Select';\nimport { Tooltip } from '@/ui/elements/Tooltip';\nimport { handleError } from '@/ui/utils/errorHandler';\n\nimport { DevOnly } from '../../common/DevOnly';\nimport { useCheckoutContext, usePaymentMethods } from '../../contexts';\nimport { Box, Button, Col, descriptors, Flex, Form, localizationKeys, Spinner, Text } from '../../customizables';\nimport { ChevronUpDown, InformationCircle } from '../../icons';\nimport type { PropsOfComponent, ThemableCssProp } from '../../styledSystem';\nimport * as AddPaymentMethod from '../PaymentMethods/AddPaymentMethod';\nimport { PaymentMethodRow } from '../PaymentMethods/PaymentMethodRow';\nimport { SubscriptionBadge } from '../Subscriptions/badge';\n\ntype PaymentMethodSource = 'existing' \| 'new';\n\nconst capitalize = (name: string) => name[0].toUpperCase() + name.slice(1);\n\nconst HIDDEN_INPUT_NAME = 'payment_method_id';\n\nexport const CheckoutForm = withCardStateProvider(() => {\n const { checkout } = useCheckout();\n\n const { plan, totals, isImmediatePlanChange, planPeriod, freeTrialEndsAt } = checkout;\n\n if (!plan) {\n return null;\n }\n\n const showCredits = !!totals.credit?.amount && totals.credit.amount > 0;\n const showPastDue = !!totals.pastDue?.amount && totals.pastDue.amount > 0;\n const showDowngradeInfo = !isImmediatePlanChange;\n\n const fee =\n planPeriod === 'month'\n ? plan.fee\n : // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n plan.annualMonthlyFee!;\n\n return (\n <Drawer.Body>\n <Box\n elementDescriptor={descriptors.checkoutFormLineItemsRoot}\n sx={t => ({\n padding: t.space.$4,\n borderBottomWidth: t.borderWidths.$normal,\n borderBottomStyle: t.borderStyles.$solid,\n borderBottomColor: t.colors.$borderAlpha100,\n })}\n >\n <LineItems.Root>\n <LineItems.Group>\n <LineItems.Title\n title={plan.name}\n description={planPeriod === 'annual' ? localizationKeys('billing.billedAnnually') : undefined}\n badge={\n plan.freeTrialEnabled && freeTrialEndsAt ? (\n <SubscriptionBadge subscription={{ status: 'free_trial' }} />\n ) : null\n }\n />\n <LineItems.Description\n prefix={planPeriod === 'annual' ? 'x12' : undefined}\n text={`${fee.currencySymbol}${fee.amountFormatted}`}\n suffix={localizationKeys('billing.checkout.perMonth')}\n />\n </LineItems.Group>\n <LineItems.Group\n borderTop\n variant='tertiary'\n >\n <LineItems.Title title={localizationKeys('billing.subtotal')} />\n <LineItems.Description text={`${totals.subtotal.currencySymbol}${totals.subtotal.amountFormatted}`} />\n </LineItems.Group>\n {showCredits && (\n <LineItems.Group variant='tertiary'>\n <LineItems.Title title={localizationKeys('billing.creditRemainder')} />\n <LineItems.Description text={`- ${totals.credit?.currencySymbol}${totals.credit?.amountFormatted}`} />\n </LineItems.Group>\n )}\n {showPastDue && (\n <LineItems.Group variant='tertiary'>\n <Tooltip.Root>\n <Tooltip.Trigger>\n <LineItems.Title\n title={localizationKeys('billing.pastDue')}\n icon={InformationCircle}\n />\n </Tooltip.Trigger>\n <Tooltip.Content text={localizationKeys('billing.checkout.pastDueNotice')} />\n </Tooltip.Root>\n <LineItems.Description text={`${totals.pastDue?.currencySymbol}${totals.pastDue?.amountFormatted}`} />\n </LineItems.Group>\n )}\n\n {!!freeTrialEndsAt && !!plan.freeTrialDays && totals.totalDueAfterFreeTrial && (\n <LineItems.Group variant='tertiary'>\n <LineItems.Title\n title={localizationKeys('billing.checkout.totalDueAfterTrial', {\n days: plan.freeTrialDays,\n })}\n />\n <LineItems.Description\n text={`${totals.totalDueAfterFreeTrial.currencySymbol}${totals.totalDueAfterFreeTrial.amountFormatted}`}\n />\n </LineItems.Group>\n )}\n\n <LineItems.Group borderTop>\n <LineItems.Title title={localizationKeys('billing.totalDueToday')} />\n <LineItems.Description text={`${totals.totalDueNow.currencySymbol}${totals.totalDueNow.amountFormatted}`} />\n </LineItems.Group>\n </LineItems.Root>\n </Box>\n\n {showDowngradeInfo && (\n <Box\n elementDescriptor={descriptors.checkoutFormLineItemsRoot}\n sx={t => ({\n paddingBlockStart: t.space.$4,\n paddingInline: t.space.$4,\n })}\n >\n <Text\n localizationKey={localizationKeys('billing.checkout.downgradeNotice')}\n variant='caption'\n colorScheme='secondary'\n />\n </Box>\n )}\n\n <CheckoutFormElements />\n </Drawer.Body>\n );\n});\n\nconst useCheckoutMutations = () => {\n const { onSubscriptionComplete } = useCheckoutContext();\n const { checkout } = useCheckout();\n const card = useCardState();\n\n if (checkout.status !== 'needs_confirmation') {\n throw new Error('Checkout not found');\n }\n\n const confirmCheckout = async (params: ConfirmCheckoutParams) => {\n card.setLoading();\n card.setError(undefined);\n\n const { error } = await checkout.confirm(params);\n\n if (error) {\n handleError(error, [], card.setError);\n } else {\n onSubscriptionComplete?.();\n }\n card.setIdle();\n };\n\n const payWithExistingPaymentMethod = (e: React.FormEvent<HTMLFormElement>) => {\n e.preventDefault();\n\n const data = new FormData(e.currentTarget);\n const paymentMethodId = data.get(HIDDEN_INPUT_NAME) as string;\n\n return confirmCheckout({\n paymentMethodId,\n });\n };\n\n const payWithoutPaymentMethod = (e: React.FormEvent<HTMLFormElement>) => {\n e.preventDefault();\n return confirmCheckout({});\n };\n\n const addPaymentMethodAndPay = (ctx: { gateway: 'stripe'; paymentToken: string }) => confirmCheckout(ctx);\n\n const payWithTestCard = () =>\n confirmCheckout({\n gateway: 'stripe',\n useTestCard: true,\n });\n\n return {\n payWithExistingPaymentMethod,\n addPaymentMethodAndPay,\n payWithTestCard,\n payWithoutPaymentMethod,\n };\n};\n\nconst CheckoutFormElements = () => {\n const { checkout } = useCheckout();\n const { plan } = checkout;\n\n const { isLoading } = usePaymentMethods();\n\n if (!plan) {\n return null;\n }\n\n if (isLoading) {\n return (\n <Spinner\n sx={{\n margin: 'auto',\n }}\n />\n );\n }\n\n return <CheckoutFormElementsInternal />;\n};\n\nconst CheckoutFormElementsInternal = () => {\n const { checkout } = useCheckout();\n const { plan, isImmediatePlanChange, needsPaymentMethod } = checkout;\n const { data: paymentMethods } = usePaymentMethods();\n\n const [paymentMethodSource, setPaymentMethodSource] = useState<PaymentMethodSource>(() =>\n paymentMethods.length > 0 \|\| __BUILD_DISABLE_RHC__ ? 'existing' : 'new',\n );\n\n const showTabs = isImmediatePlanChange && needsPaymentMethod;\n\n if (!plan) {\n return null;\n }\n\n return (\n <Col\n elementDescriptor={descriptors.checkoutFormElementsRoot}\n gap={4}\n sx={t => ({ padding: t.space.$4 })}\n >\n {__BUILD_DISABLE_RHC__ ? null : (\n <>\n {paymentMethods.length > 0 && showTabs && (\n <SegmentedControl.Root\n aria-label='Payment method source'\n value={paymentMethodSource}\n onChange={value => setPaymentMethodSource(value as PaymentMethodSource)}\n size='lg'\n fullWidth\n >\n <SegmentedControl.Button\n value='existing'\n text={localizationKeys('billing.paymentMethods__label')}\n />\n <SegmentedControl.Button\n value='new'\n text={localizationKeys('billing.addPaymentMethod__label')}\n />\n </SegmentedControl.Root>\n )}\n </>\n )}\n\n {!needsPaymentMethod ? (\n <FreeTrialButton />\n ) : paymentMethodSource === 'existing' ? (\n <ExistingPaymentMethodForm paymentMethods={paymentMethods} />\n ) : (\n !__BUILD_DISABLE_RHC__ && paymentMethodSource === 'new' && <AddPaymentMethodForCheckout />\n )}\n </Col>\n );\n};\n\nexport const PayWithTestPaymentMethod = () => {\n const { isLoading } = useCardState();\n const { payWithTestCard } = useCheckoutMutations();\n\n return (\n <Box\n sx={t => ({\n background: t.colors.$neutralAlpha50,\n padding: t.space.$2x5,\n borderRadius: t.radii.$md,\n borderWidth: t.borderWidths.$normal,\n borderStyle: t.borderStyles.$solid,\n borderColor: t.colors.$borderAlpha100,\n display: 'flex',\n flexDirection: 'column',\n rowGap: t.space.$2,\n position: 'relative',\n })}\n >\n <Box\n sx={t => ({\n position: 'absolute',\n inset: 0,\n background: `repeating-linear-gradient(-45deg,${t.colors.$warningAlpha100},${t.colors.$warningAlpha100} 6px,${t.colors.$warningAlpha150} 6px,${t.colors.$warningAlpha150} 12px)`,\n maskImage: `linear-gradient(transparent 20%, black)`,\n pointerEvents: 'none',\n })}\n />\n <Flex\n sx={t => ({\n alignItems: 'center',\n justifyContent: 'center',\n flexDirection: 'column',\n rowGap: t.space.$2,\n })}\n >\n <Text\n sx={t => ({\n color: t.colors.$warning500,\n fontWeight: t.fontWeights.$semibold,\n })}\n localizationKey={localizationKeys('billing.paymentMethod.dev.developmentMode')}\n />\n <Button\n type='button'\n block\n variant='bordered'\n localizationKey={localizationKeys('userProfile.billingPage.paymentMethodsSection.payWithTestCardButton')}\n colorScheme='secondary'\n isLoading={isLoading}\n onClick={payWithTestCard}\n />\n </Flex>\n </Box>\n );\n};\n\nconst useSubmitLabel = () => {\n const { checkout } = useCheckout();\n const { status, freeTrialEndsAt, totals } = checkout;\n\n if (status === 'needs_initialization') {\n throw new Error('Clerk: Invalid state');\n }\n\n if (freeTrialEndsAt) {\n return localizationKeys('billing.startFreeTrial');\n }\n\n if (totals.totalDueNow.amount > 0) {\n return localizationKeys('billing.pay', {\n amount: `${totals.totalDueNow.currencySymbol}${totals.totalDueNow.amountFormatted}`,\n });\n }\n\n return localizationKeys('billing.subscribe');\n};\n\nconst FreeTrialButton = withCardStateProvider(() => {\n const { for: _for } = useCheckoutContext();\n const { payWithoutPaymentMethod } = useCheckoutMutations();\n const card = useCardState();\n\n return (\n <Form\n onSubmit={payWithoutPaymentMethod}\n sx={formProps}\n >\n <Card.Alert>{card.error}</Card.Alert>\n <CheckoutSubmitButton />\n </Form>\n );\n});\n\nconst AddPaymentMethodForCheckout = withCardStateProvider(() => {\n const { addPaymentMethodAndPay } = useCheckoutMutations();\n const submitLabel = useSubmitLabel();\n const { checkout } = useCheckout();\n\n return (\n <AddPaymentMethod.Root\n onSuccess={addPaymentMethodAndPay}\n checkout={checkout}\n >\n <DevOnly>\n <PayWithTestPaymentMethod />\n </DevOnly>\n\n <AddPaymentMethod.FormButton text={submitLabel} />\n </AddPaymentMethod.Root>\n );\n});\n\nconst CheckoutSubmitButton = (props: PropsOfComponent<typeof Button>) => {\n const card = useCardState();\n const submitLabel = useSubmitLabel();\n\n return (\n <Button\n type='submit'\n colorScheme='primary'\n size='sm'\n textVariant={'buttonLarge'}\n sx={{\n width: '100%',\n }}\n isLoading={card.isLoading}\n localizationKey={submitLabel}\n {...props}\n />\n );\n};\n\nconst formProps: ThemableCssProp = t => ({\n display: 'flex',\n flexDirection: 'column',\n rowGap: t.space.$4,\n});\n\nconst ExistingPaymentMethodForm = withCardStateProvider(\n ({ paymentMethods }: { paymentMethods: BillingPaymentMethodResource[] }) => {\n const { checkout } = useCheckout();\n const { paymentMethod, isImmediatePlanChange, needsPaymentMethod } = checkout;\n\n const { payWithExistingPaymentMethod } = useCheckoutMutations();\n const card = useCardState();\n const [selectedPaymentMethod, setSelectedPaymentMethod] = useState<\n RemoveFunctions<BillingPaymentMethodResource> \| undefined\n >(paymentMethod \|\| paymentMethods.find(p => p.isDefault));\n\n const options = useMemo(() => {\n return paymentMethods.map(method => {\n const label =\n method.paymentType !== 'card'\n ? method.paymentType\n ? `${capitalize(method.paymentType)}`\n : '–'\n : method.cardType\n ? `${capitalize(method.cardType)} ⋯ ${method.last4}`\n : '–';\n\n return {\n value: method.id,\n label,\n };\n });\n }, [paymentMethods]);\n\n const showPaymentMethods = isImmediatePlanChange && needsPaymentMethod;\n\n return (\n <Form\n onSubmit={payWithExistingPaymentMethod}\n sx={formProps}\n >\n {showPaymentMethods ? (\n <Select\n elementId='paymentMethod'\n options={options}\n value={selectedPaymentMethod?.id \|\| null}\n onChange={option => {\n const paymentMethod = paymentMethods.find(source => source.id === option.value);\n setSelectedPaymentMethod(paymentMethod);\n }}\n portal\n >\n {/Store value inside an input in order to be accessible as form data/}\n <input\n name={HIDDEN_INPUT_NAME}\n type='hidden'\n value={selectedPaymentMethod?.id}\n />\n <SelectButton\n icon={ChevronUpDown}\n sx={t => ({\n justifyContent: 'space-between',\n backgroundColor: t.colors.$colorBackground,\n })}\n >\n {selectedPaymentMethod && <PaymentMethodRow paymentMethod={selectedPaymentMethod} />}\n </SelectButton>\n <SelectOptionList\n sx={t => ({\n paddingBlock: t.space.$1,\n color: t.colors.$colorForeground,\n })}\n />\n </Select>\n ) : (\n <input\n name={HIDDEN_INPUT_NAME}\n type='hidden'\n value={selectedPaymentMethod?.id}\n />\n )}\n <Card.Alert>{card.error}</Card.Alert>\n <CheckoutSubmitButton />\n </Form>\n );\n },\n);\n"],"mappings":"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"}

package/dist/components/Checkout/CheckoutPage.js CHANGED Viewed

@@ -29,7 +29,9 @@ const FetchStatus = ({ children, status }) => {
 	const { errors, fetchStatus } = __experimental_useCheckout();
 	if (useMemo(() => {
 		if (errors.global) {
-			const errorCodes = errors.global.map((e) => e.code);
+			const errorCodes = errors.global.flatMap((e) => {
+				if (e.isClerkApiResponseError()) return e.errors.map((e$1) => e$1.code);
+			});
 			if (errorCodes.includes("missing_payer_email")) return "missing_payer_email";
 			if (errorCodes.includes("invalid_plan_change")) return "invalid_plan_change";
 			return "generic_error";

package/dist/components/Checkout/CheckoutPage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CheckoutPage.js","names":["useCheckout","CheckoutProvider"],"sources":["../../../src/components/Checkout/CheckoutPage.tsx"],"sourcesContent":["import {\n __experimental_CheckoutProvider as CheckoutProvider,\n __experimental_useCheckout as useCheckout,\n} from '@clerk/shared/react';\nimport { useEffect, useMemo } from 'react';\n\nimport { useCheckoutContext } from '@/ui/contexts/components';\n\nconst Initiator = () => {\n const { checkout } = useCheckout();\n\n useEffect(() => {\n void checkout.start();\n }, []);\n return null;\n};\n\nconst Root = ({ children }: { children: React.ReactNode }) => {\n const { planId, planPeriod, for: _for } = useCheckoutContext();\n\n return (\n <CheckoutProvider\n for={_for}\n planId={\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n planId!\n }\n planPeriod={\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n planPeriod!\n }\n >\n <Initiator />\n {children}\n </CheckoutProvider>\n );\n};\n\nconst Stage = ({\n children,\n name,\n}: {\n children: React.ReactNode;\n name: ReturnType<typeof useCheckout>['checkout']['status'];\n}) => {\n const { checkout } = useCheckout();\n if (checkout.status !== name) {\n return null;\n }\n return children;\n};\n\nconst FetchStatus = ({\n children,\n status,\n}: {\n children: React.ReactNode;\n status: 'idle' \| 'fetching' \| 'generic_error' \| 'invalid_plan_change' \| 'missing_payer_email';\n}) => {\n const { errors, fetchStatus } = useCheckout();\n\n const internalFetchStatus = useMemo(() => {\n if (errors.global) {\n const errorCodes = errors.global.map(e => e.code);\n\n if (errorCodes.includes('missing_payer_email')) {\n return 'missing_payer_email';\n }\n\n if (errorCodes.includes('invalid_plan_change')) {\n return 'invalid_plan_change';\n }\n return 'generic_error';\n }\n\n return fetchStatus;\n }, [fetchStatus]);\n\n if (internalFetchStatus !== status) {\n return null;\n }\n return children;\n};\n\nexport { Root, Stage, FetchStatus };\n"],"mappings":";;;;;;AAQA,MAAM,kBAAkB;CACtB,MAAM,EAAE,aAAaA,4BAAa;AAElC,iBAAgB;AACd,EAAK,SAAS,OAAO;IACpB,EAAE,CAAC;AACN,QAAO;;AAGT,MAAM,QAAQ,EAAE,eAA8C;CAC5D,MAAM,EAAE,QAAQ,YAAY,KAAK,SAAS,oBAAoB;AAE9D,QACE,qBAACC;EACC,KAAK;EAGH;EAIA;aAGF,oBAAC,cAAY,EACZ;GACgB;;AAIvB,MAAM,SAAS,EACb,UACA,WAII;CACJ,MAAM,EAAE,aAAaD,4BAAa;AAClC,KAAI,SAAS,WAAW,KACtB,QAAO;AAET,QAAO;;AAGT,MAAM,eAAe,EACnB,UACA,aAII;CACJ,MAAM,EAAE,QAAQ,gBAAgBA,4BAAa;~~AAmB7C~~,~~KAjB4B~~,cAAc;AACxC,MAAI,OAAO,QAAQ;GACjB,MAAM,aAAa,OAAO,OAAO,~~KAAI~~,MAAK,EAAE,KAAK;~~AAEjD~~,OAAI,WAAW,SAAS,sBAAsB,CAC5C,QAAO;AAGT,OAAI,WAAW,SAAS,sBAAsB,CAC5C,QAAO;AAET,UAAO;;AAGT,SAAO;IACN,CAAC,YAAY,CAAC,KAEW,OAC1B,QAAO;AAET,QAAO"}
1	+ {"version":3,"file":"CheckoutPage.js","names":["useCheckout","CheckoutProvider","e"],"sources":["../../../src/components/Checkout/CheckoutPage.tsx"],"sourcesContent":["import {\n __experimental_CheckoutProvider as CheckoutProvider,\n __experimental_useCheckout as useCheckout,\n} from '@clerk/shared/react';\nimport { useEffect, useMemo } from 'react';\n\nimport { useCheckoutContext } from '@/ui/contexts/components';\n\nconst Initiator = () => {\n const { checkout } = useCheckout();\n\n useEffect(() => {\n void checkout.start();\n }, []);\n return null;\n};\n\nconst Root = ({ children }: { children: React.ReactNode }) => {\n const { planId, planPeriod, for: _for } = useCheckoutContext();\n\n return (\n <CheckoutProvider\n for={_for}\n planId={\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n planId!\n }\n planPeriod={\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n planPeriod!\n }\n >\n <Initiator />\n {children}\n </CheckoutProvider>\n );\n};\n\nconst Stage = ({\n children,\n name,\n}: {\n children: React.ReactNode;\n name: ReturnType<typeof useCheckout>['checkout']['status'];\n}) => {\n const { checkout } = useCheckout();\n if (checkout.status !== name) {\n return null;\n }\n return children;\n};\n\nconst FetchStatus = ({\n children,\n status,\n}: {\n children: React.ReactNode;\n status: 'idle' \| 'fetching' \| 'generic_error' \| 'invalid_plan_change' \| 'missing_payer_email';\n}) => {\n const { errors, fetchStatus } = useCheckout();\n\n const internalFetchStatus = useMemo(() => {\n if (errors.global) {\n const errorCodes = errors.global.flatMap(e => {\n if (e.isClerkApiResponseError()) {\n return e.errors.map(e => e.code);\n }\n });\n\n if (errorCodes.includes('missing_payer_email')) {\n return 'missing_payer_email';\n }\n\n if (errorCodes.includes('invalid_plan_change')) {\n return 'invalid_plan_change';\n }\n return 'generic_error';\n }\n\n return fetchStatus;\n }, [fetchStatus]);\n\n if (internalFetchStatus !== status) {\n return null;\n }\n return children;\n};\n\nexport { Root, Stage, FetchStatus };\n"],"mappings":";;;;;;AAQA,MAAM,kBAAkB;CACtB,MAAM,EAAE,aAAaA,4BAAa;AAElC,iBAAgB;AACd,EAAK,SAAS,OAAO;IACpB,EAAE,CAAC;AACN,QAAO;;AAGT,MAAM,QAAQ,EAAE,eAA8C;CAC5D,MAAM,EAAE,QAAQ,YAAY,KAAK,SAAS,oBAAoB;AAE9D,QACE,qBAACC;EACC,KAAK;EAGH;EAIA;aAGF,oBAAC,cAAY,EACZ;GACgB;;AAIvB,MAAM,SAAS,EACb,UACA,WAII;CACJ,MAAM,EAAE,aAAaD,4BAAa;AAClC,KAAI,SAAS,WAAW,KACtB,QAAO;AAET,QAAO;;AAGT,MAAM,eAAe,EACnB,UACA,aAII;CACJ,MAAM,EAAE,QAAQ,gBAAgBA,4BAAa;AAuB7C,KArB4B,cAAc;AACxC,MAAI,OAAO,QAAQ;GACjB,MAAM,aAAa,OAAO,OAAO,SAAQ,MAAK;AAC5C,QAAI,EAAE,yBAAyB,CAC7B,QAAO,EAAE,OAAO,KAAI,QAAKE,IAAE,KAAK;KAElC;AAEF,OAAI,WAAW,SAAS,sBAAsB,CAC5C,QAAO;AAGT,OAAI,WAAW,SAAS,sBAAsB,CAC5C,QAAO;AAET,UAAO;;AAGT,SAAO;IACN,CAAC,YAAY,CAAC,KAEW,OAC1B,QAAO;AAET,QAAO"}

package/dist/components/Checkout/parts.js CHANGED Viewed

@@ -33,7 +33,7 @@ const GenericError = () => {
 const InvalidPlanScreen = () => {
 	const { planPeriod } = useCheckoutContext();
 	const { errors } = __experimental_useCheckout();
-	const InvalidPlanError = errors?.global?.find((e) => e.code === "invalid_plan_change");
+	const InvalidPlanError = errors?.global?.filter((e) => e.isClerkApiResponseError()).flatMap((e) => e.errors).find((e) => e.code === "invalid_plan_change");
 	if (!InvalidPlanError) return null;
 	const { plan: planFromError, isPlanUpgradePossible } = InvalidPlanError?.meta || {};
 	return /* @__PURE__ */ jsx(Drawer.Body, { children: /* @__PURE__ */ jsxs(Flex, {

package/dist/components/Checkout/parts.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"parts.js","names":["useCheckout","t"],"sources":["../../../src/components/Checkout/parts.tsx"],"sourcesContent":["import { __experimental_useCheckout as useCheckout } from '@clerk/shared/react';\n\nimport { Alert } from '@/ui/elements/Alert';\nimport { Drawer, useDrawerContext } from '@/ui/elements/Drawer';\nimport { LineItems } from '@/ui/elements/LineItems';\n\nimport { useCheckoutContext } from '../../contexts';\nimport { Box, descriptors, Flex, localizationKeys, useLocalizations } from '../../customizables';\nimport { EmailForm } from '../UserProfile/EmailForm';\n\nexport const GenericError = () => {\n const { errors } = useCheckout();\n\n const { translateError } = useLocalizations();\n const { t } = useLocalizations();\n return (\n <Drawer.Body>\n <Flex\n align={'center'}\n justify={'center'}\n sx={t => ({\n height: '100%',\n padding: t.space.$4,\n fontSize: t.fontSizes.$md,\n })}\n >\n <Alert\n variant='danger'\n colorScheme='danger'\n >\n {errors.global\n ? translateError(errors.global[0])\n : t(localizationKeys('unstable__errors.form_param_value_invalid'))}\n </Alert>\n </Flex>\n </Drawer.Body>\n );\n};\n\nexport const InvalidPlanScreen = () => {\n const { planPeriod } = useCheckoutContext();\n const { errors } = useCheckout();\n\n const InvalidPlanError = errors?.global?.find(e => e.code === 'invalid_plan_change');\n if (!InvalidPlanError) {\n return null;\n }\n\n ~~// @ts-expect-error - meta is not a property of FieldError\n~~ const { plan: planFromError, isPlanUpgradePossible } = InvalidPlanError?.meta \|\| {};\n\n return (\n <Drawer.Body>\n <Flex\n gap={4}\n direction='col'\n >\n <Box\n elementDescriptor={descriptors.checkoutFormLineItemsRoot}\n sx={t => ({\n padding: t.space.$4,\n borderBottomWidth: t.borderWidths.$normal,\n borderBottomStyle: t.borderStyles.$solid,\n borderBottomColor: t.colors.$borderAlpha100,\n })}\n >\n <LineItems.Root>\n <LineItems.Group>\n <LineItems.Title\n title={planFromError.name}\n description={planPeriod === 'annual' ? localizationKeys('billing.billedAnnually') : undefined}\n />\n <LineItems.Description\n prefix={planPeriod === 'annual' ? 'x12' : undefined}\n text={`${planFromError.currency_symbol}${planPeriod === 'month' ? planFromError.amount_formatted : planFromError.annual_monthly_amount_formatted}`}\n suffix={localizationKeys('billing.checkout.perMonth')}\n />\n </LineItems.Group>\n </LineItems.Root>\n </Box>\n <Box sx={t => ({ padding: t.space.$4 })}>\n <Alert\n variant='info'\n colorScheme='info'\n title={\n isPlanUpgradePossible\n ? localizationKeys('billing.cannotSubscribeMonthly')\n : localizationKeys('billing.cannotSubscribeUnrecoverable')\n }\n />\n </Box>\n </Flex>\n </Drawer.Body>\n );\n};\n\nexport const AddEmailForm = () => {\n const { checkout } = useCheckout();\n const { setIsOpen } = useDrawerContext();\n return (\n <Drawer.Body>\n <Box\n sx={t => ({\n padding: t.space.$4,\n })}\n >\n <EmailForm\n title={localizationKeys('billing.checkout.emailForm.title')}\n subtitle={localizationKeys('billing.checkout.emailForm.subtitle')}\n onSuccess={() => void checkout.start()}\n onReset={() => setIsOpen(false)}\n disableAutoFocus\n />\n </Box>\n </Drawer.Body>\n );\n};\n"],"mappings":";;;;;;;;;;;;;AAUA,MAAa,qBAAqB;CAChC,MAAM,EAAE,WAAWA,4BAAa;CAEhC,MAAM,EAAE,mBAAmB,kBAAkB;CAC7C,MAAM,EAAE,MAAM,kBAAkB;AAChC,QACE,oBAAC,OAAO,kBACN,oBAAC;EACC,OAAO;EACP,SAAS;EACT,KAAI,SAAM;GACR,QAAQ;GACR,SAASC,IAAE,MAAM;GACjB,UAAUA,IAAE,UAAU;GACvB;YAED,oBAAC;GACC,SAAQ;GACR,aAAY;aAEX,OAAO,SACJ,eAAe,OAAO,OAAO,GAAG,GAChC,EAAE,iBAAiB,4CAA4C,CAAC;IAC9D;GACH,GACK;;AAIlB,MAAa,0BAA0B;CACrC,MAAM,EAAE,eAAe,oBAAoB;CAC3C,MAAM,EAAE,WAAWD,4BAAa;CAEhC,MAAM,mBAAmB,QAAQ,~~QAAQ~~,MAAK,MAAK,EAAE,SAAS,sBAAsB;~~AACpF~~,KAAI,CAAC,iBACH,QAAO;~~CAIT~~,MAAM,EAAE,MAAM,eAAe,0BAA0B,kBAAkB,QAAQ,EAAE;AAEnF,QACE,oBAAC,OAAO,kBACN,qBAAC;EACC,KAAK;EACL,WAAU;aAEV,oBAAC;GACC,mBAAmB,YAAY;GAC/B,KAAI,OAAM;IACR,SAAS,EAAE,MAAM;IACjB,mBAAmB,EAAE,aAAa;IAClC,mBAAmB,EAAE,aAAa;IAClC,mBAAmB,EAAE,OAAO;IAC7B;aAED,oBAAC,UAAU,kBACT,qBAAC,UAAU,oBACT,oBAAC,UAAU;IACT,OAAO,cAAc;IACrB,aAAa,eAAe,WAAW,iBAAiB,yBAAyB,GAAG;KACpF,EACF,oBAAC,UAAU;IACT,QAAQ,eAAe,WAAW,QAAQ;IAC1C,MAAM,GAAG,cAAc,kBAAkB,eAAe,UAAU,cAAc,mBAAmB,cAAc;IACjH,QAAQ,iBAAiB,4BAA4B;KACrD,IACc,GACH;IACb,EACN,oBAAC;GAAI,KAAI,OAAM,EAAE,SAAS,EAAE,MAAM,IAAI;aACpC,oBAAC;IACC,SAAQ;IACR,aAAY;IACZ,OACE,wBACI,iBAAiB,iCAAiC,GAClD,iBAAiB,uCAAuC;KAE9D;IACE;GACD,GACK;;AAIlB,MAAa,qBAAqB;CAChC,MAAM,EAAE,aAAaA,4BAAa;CAClC,MAAM,EAAE,cAAc,kBAAkB;AACxC,QACE,oBAAC,OAAO,kBACN,oBAAC;EACC,KAAI,OAAM,EACR,SAAS,EAAE,MAAM,IAClB;YAED,oBAAC;GACC,OAAO,iBAAiB,mCAAmC;GAC3D,UAAU,iBAAiB,sCAAsC;GACjE,iBAAiB,KAAK,SAAS,OAAO;GACtC,eAAe,UAAU,MAAM;GAC/B;IACA;GACE,GACM"}
1	+ {"version":3,"file":"parts.js","names":["useCheckout","t"],"sources":["../../../src/components/Checkout/parts.tsx"],"sourcesContent":["import { __experimental_useCheckout as useCheckout } from '@clerk/shared/react';\n\nimport { Alert } from '@/ui/elements/Alert';\nimport { Drawer, useDrawerContext } from '@/ui/elements/Drawer';\nimport { LineItems } from '@/ui/elements/LineItems';\n\nimport { useCheckoutContext } from '../../contexts';\nimport { Box, descriptors, Flex, localizationKeys, useLocalizations } from '../../customizables';\nimport { EmailForm } from '../UserProfile/EmailForm';\n\nexport const GenericError = () => {\n const { errors } = useCheckout();\n\n const { translateError } = useLocalizations();\n const { t } = useLocalizations();\n return (\n <Drawer.Body>\n <Flex\n align={'center'}\n justify={'center'}\n sx={t => ({\n height: '100%',\n padding: t.space.$4,\n fontSize: t.fontSizes.$md,\n })}\n >\n <Alert\n variant='danger'\n colorScheme='danger'\n >\n {errors.global\n ? translateError(errors.global[0])\n : t(localizationKeys('unstable__errors.form_param_value_invalid'))}\n </Alert>\n </Flex>\n </Drawer.Body>\n );\n};\n\nexport const InvalidPlanScreen = () => {\n const { planPeriod } = useCheckoutContext();\n const { errors } = useCheckout();\n\n const InvalidPlanError = errors?.global\n ?.filter(e => e.isClerkApiResponseError())\n .flatMap(e => e.errors)\n .find(e => e.code === 'invalid_plan_change');\n\n if (!InvalidPlanError) {\n return null;\n }\n\n const { plan: planFromError, isPlanUpgradePossible } = InvalidPlanError?.meta \|\| {};\n\n return (\n <Drawer.Body>\n <Flex\n gap={4}\n direction='col'\n >\n <Box\n elementDescriptor={descriptors.checkoutFormLineItemsRoot}\n sx={t => ({\n padding: t.space.$4,\n borderBottomWidth: t.borderWidths.$normal,\n borderBottomStyle: t.borderStyles.$solid,\n borderBottomColor: t.colors.$borderAlpha100,\n })}\n >\n <LineItems.Root>\n <LineItems.Group>\n <LineItems.Title\n title={planFromError.name}\n description={planPeriod === 'annual' ? localizationKeys('billing.billedAnnually') : undefined}\n />\n <LineItems.Description\n prefix={planPeriod === 'annual' ? 'x12' : undefined}\n text={`${planFromError.currency_symbol}${planPeriod === 'month' ? planFromError.amount_formatted : planFromError.annual_monthly_amount_formatted}`}\n suffix={localizationKeys('billing.checkout.perMonth')}\n />\n </LineItems.Group>\n </LineItems.Root>\n </Box>\n <Box sx={t => ({ padding: t.space.$4 })}>\n <Alert\n variant='info'\n colorScheme='info'\n title={\n isPlanUpgradePossible\n ? localizationKeys('billing.cannotSubscribeMonthly')\n : localizationKeys('billing.cannotSubscribeUnrecoverable')\n }\n />\n </Box>\n </Flex>\n </Drawer.Body>\n );\n};\n\nexport const AddEmailForm = () => {\n const { checkout } = useCheckout();\n const { setIsOpen } = useDrawerContext();\n return (\n <Drawer.Body>\n <Box\n sx={t => ({\n padding: t.space.$4,\n })}\n >\n <EmailForm\n title={localizationKeys('billing.checkout.emailForm.title')}\n subtitle={localizationKeys('billing.checkout.emailForm.subtitle')}\n onSuccess={() => void checkout.start()}\n onReset={() => setIsOpen(false)}\n disableAutoFocus\n />\n </Box>\n </Drawer.Body>\n );\n};\n"],"mappings":";;;;;;;;;;;;;AAUA,MAAa,qBAAqB;CAChC,MAAM,EAAE,WAAWA,4BAAa;CAEhC,MAAM,EAAE,mBAAmB,kBAAkB;CAC7C,MAAM,EAAE,MAAM,kBAAkB;AAChC,QACE,oBAAC,OAAO,kBACN,oBAAC;EACC,OAAO;EACP,SAAS;EACT,KAAI,SAAM;GACR,QAAQ;GACR,SAASC,IAAE,MAAM;GACjB,UAAUA,IAAE,UAAU;GACvB;YAED,oBAAC;GACC,SAAQ;GACR,aAAY;aAEX,OAAO,SACJ,eAAe,OAAO,OAAO,GAAG,GAChC,EAAE,iBAAiB,4CAA4C,CAAC;IAC9D;GACH,GACK;;AAIlB,MAAa,0BAA0B;CACrC,MAAM,EAAE,eAAe,oBAAoB;CAC3C,MAAM,EAAE,WAAWD,4BAAa;CAEhC,MAAM,mBAAmB,QAAQ,QAC7B,QAAO,MAAK,EAAE,yBAAyB,CAAC,CACzC,SAAQ,MAAK,EAAE,OAAO,CACtB,MAAK,MAAK,EAAE,SAAS,sBAAsB;AAE9C,KAAI,CAAC,iBACH,QAAO;CAGT,MAAM,EAAE,MAAM,eAAe,0BAA0B,kBAAkB,QAAQ,EAAE;AAEnF,QACE,oBAAC,OAAO,kBACN,qBAAC;EACC,KAAK;EACL,WAAU;aAEV,oBAAC;GACC,mBAAmB,YAAY;GAC/B,KAAI,OAAM;IACR,SAAS,EAAE,MAAM;IACjB,mBAAmB,EAAE,aAAa;IAClC,mBAAmB,EAAE,aAAa;IAClC,mBAAmB,EAAE,OAAO;IAC7B;aAED,oBAAC,UAAU,kBACT,qBAAC,UAAU,oBACT,oBAAC,UAAU;IACT,OAAO,cAAc;IACrB,aAAa,eAAe,WAAW,iBAAiB,yBAAyB,GAAG;KACpF,EACF,oBAAC,UAAU;IACT,QAAQ,eAAe,WAAW,QAAQ;IAC1C,MAAM,GAAG,cAAc,kBAAkB,eAAe,UAAU,cAAc,mBAAmB,cAAc;IACjH,QAAQ,iBAAiB,4BAA4B;KACrD,IACc,GACH;IACb,EACN,oBAAC;GAAI,KAAI,OAAM,EAAE,SAAS,EAAE,MAAM,IAAI;aACpC,oBAAC;IACC,SAAQ;IACR,aAAY;IACZ,OACE,wBACI,iBAAiB,iCAAiC,GAClD,iBAAiB,uCAAuC;KAE9D;IACE;GACD,GACK;;AAIlB,MAAa,qBAAqB;CAChC,MAAM,EAAE,aAAaA,4BAAa;CAClC,MAAM,EAAE,cAAc,kBAAkB;AACxC,QACE,oBAAC,OAAO,kBACN,oBAAC;EACC,KAAI,OAAM,EACR,SAAS,EAAE,MAAM,IAClB;YAED,oBAAC;GACC,OAAO,iBAAiB,mCAAmC;GAC3D,UAAU,iBAAiB,sCAAsC;GACjE,iBAAiB,KAAK,SAAS,OAAO;GACtC,eAAe,UAAU,MAAM;GAC/B;IACA;GACE,GACM"}

package/dist/components/GoogleOneTap/one-tap-start.js CHANGED Viewed

@@ -4,7 +4,7 @@ import { useFetch } from "../../hooks/useFetch.js";
 import { useGoogleOneTapContext } from "../../contexts/components/GoogleOneTap.js";
 import { withCardStateProvider } from "../../elements/contexts/index.js";
 import { loadGIS } from "../../utils/one-tap.js";
-import { clerkUnsupportedEnvironmentWarning } from "@clerk/shared/internal/clerk-js/errors";
+import "@clerk/shared/internal/clerk-js/errors";
 import { useEffect, useRef } from "react";
 import { useClerk, useUser } from "@clerk/shared/react";
@@ -28,10 +28,6 @@ function OneTapStartInternal() {
 	const environmentClientID = environment.displayConfig.googleOneTapClientId;
 	const shouldLoadGIS = !user?.id && !!environmentClientID;
 	async function initializeGIS() {
-		if (__BUILD_DISABLE_RHC__) {
-			clerkUnsupportedEnvironmentWarning("Google Identity Services");
-			return;
-		}
 		const google = await loadGIS();
 		google.accounts.id.initialize({
 			client_id: environmentClientID,

package/dist/components/GoogleOneTap/one-tap-start.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"one-tap-start.js","names":["e: any"],"sources":["../../../src/components/GoogleOneTap/one-tap-start.tsx"],"sourcesContent":["import { clerkUnsupportedEnvironmentWarning } from '@clerk/shared/internal/clerk-js/errors';\nimport { useClerk, useUser } from '@clerk/shared/react';\nimport { useEffect, useRef } from 'react';\n\nimport { withCardStateProvider } from '@/ui/elements/contexts';\n\nimport { useEnvironment, useGoogleOneTapContext } from '../../contexts';\nimport { useFetch } from '../../hooks';\nimport { useRouter } from '../../router';\nimport type { GISCredentialResponse } from '../../utils/one-tap';\nimport { loadGIS } from '../../utils/one-tap';\n\nfunction OneTapStartInternal(): JSX.Element \| null {\n const clerk = useClerk();\n const { user } = useUser();\n const environment = useEnvironment();\n const isPromptedRef = useRef(false);\n const { navigate } = useRouter();\n\n const ctx = useGoogleOneTapContext();\n\n async function oneTapCallback(response: GISCredentialResponse) {\n isPromptedRef.current = false;\n try {\n const res = await clerk.authenticateWithGoogleOneTap({\n token: response.credential,\n });\n await clerk.handleGoogleOneTapCallback(res, ctx.generateCallbackUrls(window.location.href), navigate);\n } catch (e: any) {\n console.error(e);\n }\n }\n\n const environmentClientID = environment.displayConfig.googleOneTapClientId;\n const shouldLoadGIS = !user?.id && !!environmentClientID;\n\n async function initializeGIS() {\n if (__BUILD_DISABLE_RHC__) {\n clerkUnsupportedEnvironmentWarning('Google Identity Services');\n return undefined;\n }\n\n const google = await loadGIS();\n\n google.accounts.id.initialize({\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n client_id: environmentClientID!,\n callback: oneTapCallback,\n itp_support: ctx.itpSupport,\n cancel_on_tap_outside: ctx.cancelOnTapOutside,\n auto_select: false,\n use_fedcm_for_prompt: ctx.fedCmSupport,\n });\n\n return google;\n }\n\n /*\n Prevent GIS from initializing multiple times\n */\n const { data: initializedGoogle } = useFetch(\n shouldLoadGIS ? initializeGIS : undefined,\n 'google-identity-services-script',\n );\n\n useEffect(() => {\n if (initializedGoogle && !user?.id && !isPromptedRef.current) {\n initializedGoogle.accounts.id.prompt(notification => {\n // Close the modal, when the user clicks outside the prompt or cancels\n if (notification.getMomentType() === 'skipped') {\n // Unmounts the component will cause the useEffect cleanup function from below to be called\n clerk.closeGoogleOneTap();\n }\n });\n isPromptedRef.current = true;\n }\n }, [clerk, initializedGoogle, user?.id]);\n\n // Trigger only on mount/unmount. Above we handle the logic for the initial fetch + initialization\n useEffect(() => {\n return () => {\n if (initializedGoogle && isPromptedRef.current) {\n isPromptedRef.current = false;\n initializedGoogle.accounts.id.cancel();\n }\n };\n }, [initializedGoogle]);\n\n return null;\n}\n\nexport const OneTapStart = withCardStateProvider(OneTapStartInternal);\n"],"mappings":";;;;;;;;;;;AAYA,SAAS,sBAA0C;CACjD,MAAM,QAAQ,UAAU;CACxB,MAAM,EAAE,SAAS,SAAS;CAC1B,MAAM,cAAc,gBAAgB;CACpC,MAAM,gBAAgB,OAAO,MAAM;CACnC,MAAM,EAAE,aAAa,WAAW;CAEhC,MAAM,MAAM,wBAAwB;CAEpC,eAAe,eAAe,UAAiC;AAC7D,gBAAc,UAAU;AACxB,MAAI;GACF,MAAM,MAAM,MAAM,MAAM,6BAA6B,EACnD,OAAO,SAAS,YACjB,CAAC;AACF,SAAM,MAAM,2BAA2B,KAAK,IAAI,qBAAqB,OAAO,SAAS,KAAK,EAAE,SAAS;WAC9FA,GAAQ;AACf,WAAQ,MAAM,EAAE;;;CAIpB,MAAM,sBAAsB,YAAY,cAAc;CACtD,MAAM,gBAAgB,CAAC,MAAM,MAAM,CAAC,CAAC;CAErC,eAAe,gBAAgB;~~AAC7B~~,~~MAAI,uBAAuB;AACzB,sCAAmC,2BAA2B;AAC9D;;EAGF,~~MAAM,SAAS,MAAM,SAAS;AAE9B,SAAO,SAAS,GAAG,WAAW;GAE5B,WAAW;GACX,UAAU;GACV,aAAa,IAAI;GACjB,uBAAuB,IAAI;GAC3B,aAAa;GACb,sBAAsB,IAAI;GAC3B,CAAC;AAEF,SAAO;;;;;CAMT,MAAM,EAAE,MAAM,sBAAsB,SAClC,gBAAgB,gBAAgB,QAChC,kCACD;AAED,iBAAgB;AACd,MAAI,qBAAqB,CAAC,MAAM,MAAM,CAAC,cAAc,SAAS;AAC5D,qBAAkB,SAAS,GAAG,QAAO,iBAAgB;AAEnD,QAAI,aAAa,eAAe,KAAK,UAEnC,OAAM,mBAAmB;KAE3B;AACF,iBAAc,UAAU;;IAEzB;EAAC;EAAO;EAAmB,MAAM;EAAG,CAAC;AAGxC,iBAAgB;AACd,eAAa;AACX,OAAI,qBAAqB,cAAc,SAAS;AAC9C,kBAAc,UAAU;AACxB,sBAAkB,SAAS,GAAG,QAAQ;;;IAGzC,CAAC,kBAAkB,CAAC;AAEvB,QAAO;;AAGT,MAAa,cAAc,sBAAsB,oBAAoB"}
1	+ {"version":3,"file":"one-tap-start.js","names":["e: any"],"sources":["../../../src/components/GoogleOneTap/one-tap-start.tsx"],"sourcesContent":["import { clerkUnsupportedEnvironmentWarning } from '@clerk/shared/internal/clerk-js/errors';\nimport { useClerk, useUser } from '@clerk/shared/react';\nimport { useEffect, useRef } from 'react';\n\nimport { withCardStateProvider } from '@/ui/elements/contexts';\n\nimport { useEnvironment, useGoogleOneTapContext } from '../../contexts';\nimport { useFetch } from '../../hooks';\nimport { useRouter } from '../../router';\nimport type { GISCredentialResponse } from '../../utils/one-tap';\nimport { loadGIS } from '../../utils/one-tap';\n\nfunction OneTapStartInternal(): JSX.Element \| null {\n const clerk = useClerk();\n const { user } = useUser();\n const environment = useEnvironment();\n const isPromptedRef = useRef(false);\n const { navigate } = useRouter();\n\n const ctx = useGoogleOneTapContext();\n\n async function oneTapCallback(response: GISCredentialResponse) {\n isPromptedRef.current = false;\n try {\n const res = await clerk.authenticateWithGoogleOneTap({\n token: response.credential,\n });\n await clerk.handleGoogleOneTapCallback(res, ctx.generateCallbackUrls(window.location.href), navigate);\n } catch (e: any) {\n console.error(e);\n }\n }\n\n const environmentClientID = environment.displayConfig.googleOneTapClientId;\n const shouldLoadGIS = !user?.id && !!environmentClientID;\n\n async function initializeGIS() {\n if (__BUILD_DISABLE_RHC__) {\n clerkUnsupportedEnvironmentWarning('Google Identity Services');\n return undefined;\n }\n\n const google = await loadGIS();\n\n google.accounts.id.initialize({\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n client_id: environmentClientID!,\n callback: oneTapCallback,\n itp_support: ctx.itpSupport,\n cancel_on_tap_outside: ctx.cancelOnTapOutside,\n auto_select: false,\n use_fedcm_for_prompt: ctx.fedCmSupport,\n });\n\n return google;\n }\n\n /*\n Prevent GIS from initializing multiple times\n */\n const { data: initializedGoogle } = useFetch(\n shouldLoadGIS ? initializeGIS : undefined,\n 'google-identity-services-script',\n );\n\n useEffect(() => {\n if (initializedGoogle && !user?.id && !isPromptedRef.current) {\n initializedGoogle.accounts.id.prompt(notification => {\n // Close the modal, when the user clicks outside the prompt or cancels\n if (notification.getMomentType() === 'skipped') {\n // Unmounts the component will cause the useEffect cleanup function from below to be called\n clerk.closeGoogleOneTap();\n }\n });\n isPromptedRef.current = true;\n }\n }, [clerk, initializedGoogle, user?.id]);\n\n // Trigger only on mount/unmount. Above we handle the logic for the initial fetch + initialization\n useEffect(() => {\n return () => {\n if (initializedGoogle && isPromptedRef.current) {\n isPromptedRef.current = false;\n initializedGoogle.accounts.id.cancel();\n }\n };\n }, [initializedGoogle]);\n\n return null;\n}\n\nexport const OneTapStart = withCardStateProvider(OneTapStartInternal);\n"],"mappings":";;;;;;;;;;;AAYA,SAAS,sBAA0C;CACjD,MAAM,QAAQ,UAAU;CACxB,MAAM,EAAE,SAAS,SAAS;CAC1B,MAAM,cAAc,gBAAgB;CACpC,MAAM,gBAAgB,OAAO,MAAM;CACnC,MAAM,EAAE,aAAa,WAAW;CAEhC,MAAM,MAAM,wBAAwB;CAEpC,eAAe,eAAe,UAAiC;AAC7D,gBAAc,UAAU;AACxB,MAAI;GACF,MAAM,MAAM,MAAM,MAAM,6BAA6B,EACnD,OAAO,SAAS,YACjB,CAAC;AACF,SAAM,MAAM,2BAA2B,KAAK,IAAI,qBAAqB,OAAO,SAAS,KAAK,EAAE,SAAS;WAC9FA,GAAQ;AACf,WAAQ,MAAM,EAAE;;;CAIpB,MAAM,sBAAsB,YAAY,cAAc;CACtD,MAAM,gBAAgB,CAAC,MAAM,MAAM,CAAC,CAAC;CAErC,eAAe,gBAAgB;EAM7B,MAAM,SAAS,MAAM,SAAS;AAE9B,SAAO,SAAS,GAAG,WAAW;GAE5B,WAAW;GACX,UAAU;GACV,aAAa,IAAI;GACjB,uBAAuB,IAAI;GAC3B,aAAa;GACb,sBAAsB,IAAI;GAC3B,CAAC;AAEF,SAAO;;;;;CAMT,MAAM,EAAE,MAAM,sBAAsB,SAClC,gBAAgB,gBAAgB,QAChC,kCACD;AAED,iBAAgB;AACd,MAAI,qBAAqB,CAAC,MAAM,MAAM,CAAC,cAAc,SAAS;AAC5D,qBAAkB,SAAS,GAAG,QAAO,iBAAgB;AAEnD,QAAI,aAAa,eAAe,KAAK,UAEnC,OAAM,mBAAmB;KAE3B;AACF,iBAAc,UAAU;;IAEzB;EAAC;EAAO;EAAmB,MAAM;EAAG,CAAC;AAGxC,iBAAgB;AACd,eAAa;AACX,OAAI,qBAAqB,cAAc,SAAS;AAC9C,kBAAc,UAAU;AACxB,sBAAkB,SAAS,GAAG,QAAQ;;;IAGzC,CAAC,kBAAkB,CAAC;AAEvB,QAAO;;AAGT,MAAa,cAAc,sBAAsB,oBAAoB"}

package/dist/components/OrganizationProfile/InviteMembersScreen.js CHANGED Viewed

@@ -9,7 +9,6 @@ import { useActionContext } from "../../elements/Action/ActionRoot.js";
 import { SuccessPage } from "../../elements/SuccessPage.js";
 import { InviteMembersForm } from "./InviteMembersForm.js";
 import { IconCircle } from "../../elements/IconCircle.js";
-import "@clerk/shared/utils";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useOrganization } from "@clerk/shared/react";

package/dist/components/OrganizationProfile/InviteMembersScreen.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InviteMembersScreen.js","names":["Email"],"sources":["../../../src/components/OrganizationProfile/InviteMembersScreen.tsx"],"sourcesContent":["import { useOrganization } from '@clerk/shared/react';\~~nimport { runIfFunctionOrReturn } from '@clerk/shared/utils';\~~n\nimport { useCardState, withCardStateProvider } from '@/ui/elements/contexts';\nimport { FormContainer } from '@/ui/elements/FormContainer';\nimport { IconCircle } from '@/ui/elements/IconCircle';\nimport { SuccessPage } from '@/ui/elements/SuccessPage';\n\nimport { useWizard, Wizard } from '../../common';\nimport { ~~useOrganizationProfileContext } from '../../contexts';\nimport {~~ descriptors, Flex, localizationKeys, Text } from '../../customizables';\nimport { useActionContext } from '../../elements/Action/ActionRoot';\nimport { Email } from '../../icons';\nimport { InviteMembersForm } from './InviteMembersForm';\n\ntype InviteMembersScreenProps = {\n onReset?: () => void;\n};\n\nexport const InviteMembersScreen = withCardStateProvider((props: InviteMembersScreenProps) => {\n const { close } = useActionContext();\n const { onReset = close } = props;\n const title = localizationKeys('organizationProfile.invitePage.title');\n const subtitle = localizationKeys('organizationProfile.invitePage.subtitle');\n const card = useCardState();\n const wizard = useWizard({ onNextStep: () => card.setError(undefined) });\n const { organization } = useOrganization();\n\n if (!organization) {\n return null;\n }\n\n return (\n <Wizard {...wizard.props}>\n <FormContainer\n headerTitle={title}\n headerSubtitle={subtitle}\n >\n <InviteMembersForm\n onSuccess={wizard.nextStep}\n onReset={onReset}\n />\n </FormContainer>\n <SuccessPage\n title={title}\n onFinish={close}\n contents={<InvitationsSentMessage />}\n />\n </Wizard>\n );\n});\n\nexport const InvitationsSentMessage = () => {\n return (\n <Flex\n direction='col'\n center\n gap={4}\n >\n <IconCircle\n boxElementDescriptor={descriptors.invitationsSentIconBox}\n iconElementDescriptor={descriptors.invitationsSentIcon}\n icon={Email}\n />\n <Text localizationKey={localizationKeys('organizationProfile.invitePage.successMessage')} />\n </Flex>\n );\n};\n"],"mappings":"~~;;;;;;;;;;;;;;;;AAmBA~~,MAAa,sBAAsB,uBAAuB,UAAoC;CAC5F,MAAM,EAAE,UAAU,kBAAkB;CACpC,MAAM,EAAE,UAAU,UAAU;CAC5B,MAAM,QAAQ,iBAAiB,uCAAuC;CACtE,MAAM,WAAW,iBAAiB,0CAA0C;CAC5E,MAAM,OAAO,cAAc;CAC3B,MAAM,SAAS,UAAU,EAAE,kBAAkB,KAAK,SAAS,OAAU,EAAE,CAAC;CACxE,MAAM,EAAE,iBAAiB,iBAAiB;AAE1C,KAAI,CAAC,aACH,QAAO;AAGT,QACE,qBAAC;EAAO,GAAI,OAAO;aACjB,oBAAC;GACC,aAAa;GACb,gBAAgB;aAEhB,oBAAC;IACC,WAAW,OAAO;IACT;KACT;IACY,EAChB,oBAAC;GACQ;GACP,UAAU;GACV,UAAU,oBAAC,2BAAyB;IACpC;GACK;EAEX;AAEF,MAAa,+BAA+B;AAC1C,QACE,qBAAC;EACC,WAAU;EACV;EACA,KAAK;aAEL,oBAAC;GACC,sBAAsB,YAAY;GAClC,uBAAuB,YAAY;GACnC,MAAMA;IACN,EACF,oBAAC,QAAK,iBAAiB,iBAAiB,gDAAgD,GAAI;GACvF"}
1	+ {"version":3,"file":"InviteMembersScreen.js","names":["Email"],"sources":["../../../src/components/OrganizationProfile/InviteMembersScreen.tsx"],"sourcesContent":["import { useOrganization } from '@clerk/shared/react';\n\nimport { useCardState, withCardStateProvider } from '@/ui/elements/contexts';\nimport { FormContainer } from '@/ui/elements/FormContainer';\nimport { IconCircle } from '@/ui/elements/IconCircle';\nimport { SuccessPage } from '@/ui/elements/SuccessPage';\n\nimport { useWizard, Wizard } from '../../common';\nimport { descriptors, Flex, localizationKeys, Text } from '../../customizables';\nimport { useActionContext } from '../../elements/Action/ActionRoot';\nimport { Email } from '../../icons';\nimport { InviteMembersForm } from './InviteMembersForm';\ntype InviteMembersScreenProps = {\n onReset?: () => void;\n};\n\nexport const InviteMembersScreen = withCardStateProvider((props: InviteMembersScreenProps) => {\n const { close } = useActionContext();\n const { onReset = close } = props;\n const title = localizationKeys('organizationProfile.invitePage.title');\n const subtitle = localizationKeys('organizationProfile.invitePage.subtitle');\n const card = useCardState();\n const wizard = useWizard({ onNextStep: () => card.setError(undefined) });\n const { organization } = useOrganization();\n\n if (!organization) {\n return null;\n }\n\n return (\n <Wizard {...wizard.props}>\n <FormContainer\n headerTitle={title}\n headerSubtitle={subtitle}\n >\n <InviteMembersForm\n onSuccess={wizard.nextStep}\n onReset={onReset}\n />\n </FormContainer>\n <SuccessPage\n title={title}\n onFinish={close}\n contents={<InvitationsSentMessage />}\n />\n </Wizard>\n );\n});\n\nexport const InvitationsSentMessage = () => {\n return (\n <Flex\n direction='col'\n center\n gap={4}\n >\n <IconCircle\n boxElementDescriptor={descriptors.invitationsSentIconBox}\n iconElementDescriptor={descriptors.invitationsSentIcon}\n icon={Email}\n />\n <Text localizationKey={localizationKeys('organizationProfile.invitePage.successMessage')} />\n </Flex>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;AAgBA,MAAa,sBAAsB,uBAAuB,UAAoC;CAC5F,MAAM,EAAE,UAAU,kBAAkB;CACpC,MAAM,EAAE,UAAU,UAAU;CAC5B,MAAM,QAAQ,iBAAiB,uCAAuC;CACtE,MAAM,WAAW,iBAAiB,0CAA0C;CAC5E,MAAM,OAAO,cAAc;CAC3B,MAAM,SAAS,UAAU,EAAE,kBAAkB,KAAK,SAAS,OAAU,EAAE,CAAC;CACxE,MAAM,EAAE,iBAAiB,iBAAiB;AAE1C,KAAI,CAAC,aACH,QAAO;AAGT,QACE,qBAAC;EAAO,GAAI,OAAO;aACjB,oBAAC;GACC,aAAa;GACb,gBAAgB;aAEhB,oBAAC;IACC,WAAW,OAAO;IACT;KACT;IACY,EAChB,oBAAC;GACQ;GACP,UAAU;GACV,UAAU,oBAAC,2BAAyB;IACpC;GACK;EAEX;AAEF,MAAa,+BAA+B;AAC1C,QACE,qBAAC;EACC,WAAU;EACV;EACA,KAAK;aAEL,oBAAC;GACC,sBAAsB,YAAY;GAClC,uBAAuB,YAAY;GACnC,MAAMA;IACN,EACF,oBAAC,QAAK,iBAAiB,iBAAiB,gDAAgD,GAAI;GACvF"}

package/dist/components/OrganizationProfile/OrganizationMembers.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"OrganizationMembers.js","names":["query"],"sources":["../../../src/components/OrganizationProfile/OrganizationMembers.tsx"],"sourcesContent":["import { useOrganization } from '@clerk/shared/react';\nimport { useState } from 'react';\n\nimport { Animated } from '@/ui/elements/Animated';\nimport { Card } from '@/ui/elements/Card';\nimport { useCardState, withCardStateProvider } from '@/ui/elements/contexts';\nimport { Header } from '@/ui/elements/Header';\nimport { Tab, TabPanel, TabPanels, Tabs, TabsList } from '@/ui/elements/Tabs';\n\nimport { NotificationCountBadge, useProtect } from '../../common';\nimport { useEnvironment, ~~useOrganizationProfileContext~~ } from '../../contexts';\nimport { Col, descriptors, Flex, localizationKeys } from '../../customizables';\nimport { Action } from '../../elements/Action';\nimport { mqu } from '../../styledSystem';\nimport { ActiveMembersList } from './ActiveMembersList';\nimport { MembersActionsRow } from './MembersActions';\nimport { MembersSearch } from './MembersSearch';\nimport { OrganizationMembersTabInvitations } from './OrganizationMembersTabInvitations';\nimport { OrganizationMembersTabRequests } from './OrganizationMembersTabRequests';\n\nexport const ACTIVE_MEMBERS_PAGE_SIZE = 10;\n\nexport const OrganizationMembers = withCardStateProvider(() => {\n const { organizationSettings } = useEnvironment();\n const card = useCardState();\n const canManageMemberships = useProtect({ permission: 'org:sys_memberships:manage' });\n const canReadMemberships = useProtect({ permission: 'org:sys_memberships:read' });\n const isDomainsEnabled = organizationSettings?.domains?.enabled && canManageMemberships;\n\n const [query, setQuery] = useState('');\n const [search, setSearch] = useState('');\n\n const { membershipRequests, memberships, invitations } = useOrganization({\n membershipRequests: isDomainsEnabled \|\| undefined,\n invitations: canManageMemberships \|\| undefined,\n memberships: canReadMemberships\n ? {\n keepPreviousData: true,\n query: query \|\| undefined,\n }\n : undefined,\n });\n\n if (canManageMemberships === null) {\n return null;\n }\n\n return (\n <Col\n elementDescriptor={descriptors.page}\n gap={2}\n >\n <Col\n elementDescriptor={descriptors.profilePage}\n elementId={descriptors.profilePage.setId('organizationMembers')}\n gap={4}\n >\n <Action.Root animate={false}>\n <Animated asChild>\n <Header.Root\n contentSx={{\n [mqu.md]: {\n flexDirection: 'row',\n width: '100%',\n justifyContent: 'space-between',\n },\n }}\n >\n <Header.Title\n localizationKey={localizationKeys('organizationProfile.start.headerTitle__members')}\n textVariant='h2'\n />\n </Header.Root>\n </Animated>\n <Card.Alert>{card.error}</Card.Alert>\n <Tabs>\n <TabsList sx={t => ({ gap: t.space.$2 })}>\n {canReadMemberships && (\n <Tab localizationKey={localizationKeys('organizationProfile.membersPage.start.headerTitle__members')}>\n {!!memberships?.count && (\n <NotificationCountBadge\n shouldAnimate={!query}\n notificationCount={memberships.count}\n colorScheme='outline'\n />\n )}\n </Tab>\n )}\n {canManageMemberships && (\n <Tab\n localizationKey={localizationKeys('organizationProfile.membersPage.start.headerTitle__invitations')}\n >\n {invitations?.data && !invitations.isLoading && (\n <NotificationCountBadge\n notificationCount={invitations.count}\n colorScheme='outline'\n />\n )}\n </Tab>\n )}\n {canManageMemberships && isDomainsEnabled && (\n <Tab localizationKey={localizationKeys('organizationProfile.membersPage.start.headerTitle__requests')}>\n {membershipRequests?.data && !membershipRequests.isLoading && (\n <NotificationCountBadge\n notificationCount={membershipRequests.count}\n colorScheme='outline'\n />\n )}\n </Tab>\n )}\n </TabsList>\n <TabPanels>\n {canReadMemberships && (\n <TabPanel sx={{ width: '100%' }}>\n <Flex\n gap={4}\n direction='col'\n sx={{\n width: '100%',\n }}\n >\n <Flex\n gap={2}\n direction='col'\n sx={{\n width: '100%',\n }}\n >\n <MembersActionsRow\n actionSlot={\n <MembersSearch\n query={query}\n value={search}\n memberships={memberships}\n onSearchChange={query => setSearch(query)}\n onQueryTrigger={query => setQuery(query)}\n />\n }\n />\n <ActiveMembersList\n pageSize={ACTIVE_MEMBERS_PAGE_SIZE}\n memberships={memberships}\n />\n </Flex>\n </Flex>\n </TabPanel>\n )}\n {canManageMemberships && (\n <TabPanel sx={{ width: '100%' }}>\n <OrganizationMembersTabInvitations />\n </TabPanel>\n )}\n {canManageMemberships && isDomainsEnabled && (\n <TabPanel sx={{ width: '100%' }}>\n <OrganizationMembersTabRequests />\n </TabPanel>\n )}\n </TabPanels>\n </Tabs>\n </Action.Root>\n </Col>\n </Col>\n );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAoBA,MAAa,2BAA2B;AAExC,MAAa,sBAAsB,4BAA4B;CAC7D,MAAM,EAAE,yBAAyB,gBAAgB;CACjD,MAAM,OAAO,cAAc;CAC3B,MAAM,uBAAuB,WAAW,EAAE,YAAY,8BAA8B,CAAC;CACrF,MAAM,qBAAqB,WAAW,EAAE,YAAY,4BAA4B,CAAC;CACjF,MAAM,mBAAmB,sBAAsB,SAAS,WAAW;CAEnE,MAAM,CAAC,OAAO,YAAY,SAAS,GAAG;CACtC,MAAM,CAAC,QAAQ,aAAa,SAAS,GAAG;CAExC,MAAM,EAAE,oBAAoB,aAAa,gBAAgB,gBAAgB;EACvE,oBAAoB,oBAAoB;EACxC,aAAa,wBAAwB;EACrC,aAAa,qBACT;GACE,kBAAkB;GAClB,OAAO,SAAS;GACjB,GACD;EACL,CAAC;AAEF,KAAI,yBAAyB,KAC3B,QAAO;AAGT,QACE,oBAAC;EACC,mBAAmB,YAAY;EAC/B,KAAK;YAEL,oBAAC;GACC,mBAAmB,YAAY;GAC/B,WAAW,YAAY,YAAY,MAAM,sBAAsB;GAC/D,KAAK;aAEL,qBAAC,OAAO;IAAK,SAAS;;KACpB,oBAAC;MAAS;gBACR,oBAAC,OAAO;OACN,WAAW,GACR,IAAI,KAAK;QACR,eAAe;QACf,OAAO;QACP,gBAAgB;QACjB,EACF;iBAED,oBAAC,OAAO;QACN,iBAAiB,iBAAiB,iDAAiD;QACnF,aAAY;SACZ;QACU;OACL;KACX,oBAAC,KAAK,mBAAO,KAAK,QAAmB;KACrC,qBAAC,mBACC,qBAAC;MAAS,KAAI,OAAM,EAAE,KAAK,EAAE,MAAM,IAAI;;OACpC,sBACC,oBAAC;QAAI,iBAAiB,iBAAiB,6DAA6D;kBACjG,CAAC,CAAC,aAAa,SACd,oBAAC;SACC,eAAe,CAAC;SAChB,mBAAmB,YAAY;SAC/B,aAAY;UACZ;SAEA;OAEP,wBACC,oBAAC;QACC,iBAAiB,iBAAiB,iEAAiE;kBAElG,aAAa,QAAQ,CAAC,YAAY,aACjC,oBAAC;SACC,mBAAmB,YAAY;SAC/B,aAAY;UACZ;SAEA;OAEP,wBAAwB,oBACvB,oBAAC;QAAI,iBAAiB,iBAAiB,8DAA8D;kBAClG,oBAAoB,QAAQ,CAAC,mBAAmB,aAC/C,oBAAC;SACC,mBAAmB,mBAAmB;SACtC,aAAY;UACZ;SAEA;;OAEC,EACX,qBAAC;MACE,sBACC,oBAAC;OAAS,IAAI,EAAE,OAAO,QAAQ;iBAC7B,oBAAC;QACC,KAAK;QACL,WAAU;QACV,IAAI,EACF,OAAO,QACR;kBAED,qBAAC;SACC,KAAK;SACL,WAAU;SACV,IAAI,EACF,OAAO,QACR;oBAED,oBAAC,qBACC,YACE,oBAAC;UACQ;UACP,OAAO;UACM;UACb,iBAAgB,YAAS,UAAUA,QAAM;UACzC,iBAAgB,YAAS,SAASA,QAAM;WACxC,GAEJ,EACF,oBAAC;UACC,UAAU;UACG;WACb;UACG;SACF;QACE;MAEZ,wBACC,oBAAC;OAAS,IAAI,EAAE,OAAO,QAAQ;iBAC7B,oBAAC,sCAAoC;QAC5B;MAEZ,wBAAwB,oBACvB,oBAAC;OAAS,IAAI,EAAE,OAAO,QAAQ;iBAC7B,oBAAC,mCAAiC;QACzB;SAEH,IACP;;KACK;IACV;GACF;EAER"}
1	+ {"version":3,"file":"OrganizationMembers.js","names":["query"],"sources":["../../../src/components/OrganizationProfile/OrganizationMembers.tsx"],"sourcesContent":["import { useOrganization } from '@clerk/shared/react';\nimport { useState } from 'react';\n\nimport { Animated } from '@/ui/elements/Animated';\nimport { Card } from '@/ui/elements/Card';\nimport { useCardState, withCardStateProvider } from '@/ui/elements/contexts';\nimport { Header } from '@/ui/elements/Header';\nimport { Tab, TabPanel, TabPanels, Tabs, TabsList } from '@/ui/elements/Tabs';\n\nimport { NotificationCountBadge, useProtect } from '../../common';\nimport { useEnvironment } from '../../contexts';\nimport { Col, descriptors, Flex, localizationKeys } from '../../customizables';\nimport { Action } from '../../elements/Action';\nimport { mqu } from '../../styledSystem';\nimport { ActiveMembersList } from './ActiveMembersList';\nimport { MembersActionsRow } from './MembersActions';\nimport { MembersSearch } from './MembersSearch';\nimport { OrganizationMembersTabInvitations } from './OrganizationMembersTabInvitations';\nimport { OrganizationMembersTabRequests } from './OrganizationMembersTabRequests';\n\nexport const ACTIVE_MEMBERS_PAGE_SIZE = 10;\n\nexport const OrganizationMembers = withCardStateProvider(() => {\n const { organizationSettings } = useEnvironment();\n const card = useCardState();\n const canManageMemberships = useProtect({ permission: 'org:sys_memberships:manage' });\n const canReadMemberships = useProtect({ permission: 'org:sys_memberships:read' });\n const isDomainsEnabled = organizationSettings?.domains?.enabled && canManageMemberships;\n\n const [query, setQuery] = useState('');\n const [search, setSearch] = useState('');\n\n const { membershipRequests, memberships, invitations } = useOrganization({\n membershipRequests: isDomainsEnabled \|\| undefined,\n invitations: canManageMemberships \|\| undefined,\n memberships: canReadMemberships\n ? {\n keepPreviousData: true,\n query: query \|\| undefined,\n }\n : undefined,\n });\n\n if (canManageMemberships === null) {\n return null;\n }\n\n return (\n <Col\n elementDescriptor={descriptors.page}\n gap={2}\n >\n <Col\n elementDescriptor={descriptors.profilePage}\n elementId={descriptors.profilePage.setId('organizationMembers')}\n gap={4}\n >\n <Action.Root animate={false}>\n <Animated asChild>\n <Header.Root\n contentSx={{\n [mqu.md]: {\n flexDirection: 'row',\n width: '100%',\n justifyContent: 'space-between',\n },\n }}\n >\n <Header.Title\n localizationKey={localizationKeys('organizationProfile.start.headerTitle__members')}\n textVariant='h2'\n />\n </Header.Root>\n </Animated>\n <Card.Alert>{card.error}</Card.Alert>\n <Tabs>\n <TabsList sx={t => ({ gap: t.space.$2 })}>\n {canReadMemberships && (\n <Tab localizationKey={localizationKeys('organizationProfile.membersPage.start.headerTitle__members')}>\n {!!memberships?.count && (\n <NotificationCountBadge\n shouldAnimate={!query}\n notificationCount={memberships.count}\n colorScheme='outline'\n />\n )}\n </Tab>\n )}\n {canManageMemberships && (\n <Tab\n localizationKey={localizationKeys('organizationProfile.membersPage.start.headerTitle__invitations')}\n >\n {invitations?.data && !invitations.isLoading && (\n <NotificationCountBadge\n notificationCount={invitations.count}\n colorScheme='outline'\n />\n )}\n </Tab>\n )}\n {canManageMemberships && isDomainsEnabled && (\n <Tab localizationKey={localizationKeys('organizationProfile.membersPage.start.headerTitle__requests')}>\n {membershipRequests?.data && !membershipRequests.isLoading && (\n <NotificationCountBadge\n notificationCount={membershipRequests.count}\n colorScheme='outline'\n />\n )}\n </Tab>\n )}\n </TabsList>\n <TabPanels>\n {canReadMemberships && (\n <TabPanel sx={{ width: '100%' }}>\n <Flex\n gap={4}\n direction='col'\n sx={{\n width: '100%',\n }}\n >\n <Flex\n gap={2}\n direction='col'\n sx={{\n width: '100%',\n }}\n >\n <MembersActionsRow\n actionSlot={\n <MembersSearch\n query={query}\n value={search}\n memberships={memberships}\n onSearchChange={query => setSearch(query)}\n onQueryTrigger={query => setQuery(query)}\n />\n }\n />\n <ActiveMembersList\n pageSize={ACTIVE_MEMBERS_PAGE_SIZE}\n memberships={memberships}\n />\n </Flex>\n </Flex>\n </TabPanel>\n )}\n {canManageMemberships && (\n <TabPanel sx={{ width: '100%' }}>\n <OrganizationMembersTabInvitations />\n </TabPanel>\n )}\n {canManageMemberships && isDomainsEnabled && (\n <TabPanel sx={{ width: '100%' }}>\n <OrganizationMembersTabRequests />\n </TabPanel>\n )}\n </TabPanels>\n </Tabs>\n </Action.Root>\n </Col>\n </Col>\n );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAoBA,MAAa,2BAA2B;AAExC,MAAa,sBAAsB,4BAA4B;CAC7D,MAAM,EAAE,yBAAyB,gBAAgB;CACjD,MAAM,OAAO,cAAc;CAC3B,MAAM,uBAAuB,WAAW,EAAE,YAAY,8BAA8B,CAAC;CACrF,MAAM,qBAAqB,WAAW,EAAE,YAAY,4BAA4B,CAAC;CACjF,MAAM,mBAAmB,sBAAsB,SAAS,WAAW;CAEnE,MAAM,CAAC,OAAO,YAAY,SAAS,GAAG;CACtC,MAAM,CAAC,QAAQ,aAAa,SAAS,GAAG;CAExC,MAAM,EAAE,oBAAoB,aAAa,gBAAgB,gBAAgB;EACvE,oBAAoB,oBAAoB;EACxC,aAAa,wBAAwB;EACrC,aAAa,qBACT;GACE,kBAAkB;GAClB,OAAO,SAAS;GACjB,GACD;EACL,CAAC;AAEF,KAAI,yBAAyB,KAC3B,QAAO;AAGT,QACE,oBAAC;EACC,mBAAmB,YAAY;EAC/B,KAAK;YAEL,oBAAC;GACC,mBAAmB,YAAY;GAC/B,WAAW,YAAY,YAAY,MAAM,sBAAsB;GAC/D,KAAK;aAEL,qBAAC,OAAO;IAAK,SAAS;;KACpB,oBAAC;MAAS;gBACR,oBAAC,OAAO;OACN,WAAW,GACR,IAAI,KAAK;QACR,eAAe;QACf,OAAO;QACP,gBAAgB;QACjB,EACF;iBAED,oBAAC,OAAO;QACN,iBAAiB,iBAAiB,iDAAiD;QACnF,aAAY;SACZ;QACU;OACL;KACX,oBAAC,KAAK,mBAAO,KAAK,QAAmB;KACrC,qBAAC,mBACC,qBAAC;MAAS,KAAI,OAAM,EAAE,KAAK,EAAE,MAAM,IAAI;;OACpC,sBACC,oBAAC;QAAI,iBAAiB,iBAAiB,6DAA6D;kBACjG,CAAC,CAAC,aAAa,SACd,oBAAC;SACC,eAAe,CAAC;SAChB,mBAAmB,YAAY;SAC/B,aAAY;UACZ;SAEA;OAEP,wBACC,oBAAC;QACC,iBAAiB,iBAAiB,iEAAiE;kBAElG,aAAa,QAAQ,CAAC,YAAY,aACjC,oBAAC;SACC,mBAAmB,YAAY;SAC/B,aAAY;UACZ;SAEA;OAEP,wBAAwB,oBACvB,oBAAC;QAAI,iBAAiB,iBAAiB,8DAA8D;kBAClG,oBAAoB,QAAQ,CAAC,mBAAmB,aAC/C,oBAAC;SACC,mBAAmB,mBAAmB;SACtC,aAAY;UACZ;SAEA;;OAEC,EACX,qBAAC;MACE,sBACC,oBAAC;OAAS,IAAI,EAAE,OAAO,QAAQ;iBAC7B,oBAAC;QACC,KAAK;QACL,WAAU;QACV,IAAI,EACF,OAAO,QACR;kBAED,qBAAC;SACC,KAAK;SACL,WAAU;SACV,IAAI,EACF,OAAO,QACR;oBAED,oBAAC,qBACC,YACE,oBAAC;UACQ;UACP,OAAO;UACM;UACb,iBAAgB,YAAS,UAAUA,QAAM;UACzC,iBAAgB,YAAS,SAASA,QAAM;WACxC,GAEJ,EACF,oBAAC;UACC,UAAU;UACG;WACb;UACG;SACF;QACE;MAEZ,wBACC,oBAAC;OAAS,IAAI,EAAE,OAAO,QAAQ;iBAC7B,oBAAC,sCAAoC;QAC5B;MAEZ,wBAAwB,oBACvB,oBAAC;OAAS,IAAI,EAAE,OAAO,QAAQ;iBAC7B,oBAAC,mCAAiC;QACzB;SAEH,IACP;;KACK;IACV;GACF;EAER"}

package/dist/components/PaymentMethods/PaymentMethods.js CHANGED Viewed

@@ -70,7 +70,6 @@ const PaymentMethods = withCardStateProvider(() => {
 	const { data: paymentMethods, isLoading, revalidate: revalidatePaymentMethods } = usePaymentMethods();
 	const sortedPaymentMethods = useMemo(() => paymentMethods.sort((a, b) => a.isDefault && !b.isDefault ? -1 : 1), [paymentMethods]);
 	if (!resource) return null;
-	if (__BUILD_DISABLE_RHC__ && sortedPaymentMethods.length === 0) return null;
 	return /* @__PURE__ */ jsx(ProfileSection.Root, {
 		title: localizationKeys(`${localizationRoot}.billingPage.paymentMethodsSection.title`),
 		centered: false,
@@ -99,7 +98,7 @@ const PaymentMethods = withCardStateProvider(() => {
 						revalidate: revalidatePaymentMethods
 					})
 				})
-			})] }, paymentMethod.id)), __BUILD_DISABLE_RHC__ ? null : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Action.Trigger, {
+			})] }, paymentMethod.id)), /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Action.Trigger, {
 				value: "add",
 				children: /* @__PURE__ */ jsx(ProfileSection.ArrowButton, {
 					id: "paymentMethods",

package/dist/components/PaymentMethods/PaymentMethods.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PaymentMethods.js","names":["AddPaymentMethod.Root","AddPaymentMethod.FormHeader","AddPaymentMethod.FormSubtitle"],"sources":["../../../src/components/PaymentMethods/PaymentMethods.tsx"],"sourcesContent":["import { useClerk, useOrganizationContext } from '@clerk/shared/react';\nimport type { BillingPaymentMethodResource } from '@clerk/shared/types';\nimport { Fragment, useMemo, useRef } from 'react';\n\nimport { useCardState, withCardStateProvider } from '@/ui/elements/contexts';\nimport { FullHeightLoader } from '@/ui/elements/FullHeightLoader';\nimport { ProfileSection } from '@/ui/elements/Section';\nimport { ThreeDotsMenu } from '@/ui/elements/ThreeDotsMenu';\nimport { handleError } from '@/ui/utils/errorHandler';\n\nimport { RemoveResourceForm } from '../../common';\nimport { DevOnly } from '../../common/DevOnly';\nimport { usePaymentMethods, useSubscriberTypeContext, useSubscriberTypeLocalizationRoot } from '../../contexts';\nimport { localizationKeys } from '../../customizables';\nimport { Action } from '../../elements/Action';\nimport { useActionContext } from '../../elements/Action/ActionRoot';\nimport * as AddPaymentMethod from './AddPaymentMethod';\nimport { PaymentMethodRow } from './PaymentMethodRow';\nimport { TestPaymentMethod } from './TestPaymentMethod';\n\nconst AddScreen = withCardStateProvider(({ onSuccess }: { onSuccess: () => void }) => {\n const { close } = useActionContext();\n const clerk = useClerk();\n const subscriberType = useSubscriberTypeContext();\n const localizationRoot = useSubscriberTypeLocalizationRoot();\n\n const onAddPaymentMethodSuccess = async (context: { gateway: 'stripe'; paymentToken: string }) => {\n const resource = subscriberType === 'organization' ? clerk?.organization : clerk.user;\n await resource?.addPaymentMethod(context);\n onSuccess();\n close();\n return Promise.resolve();\n };\n\n return (\n <AddPaymentMethod.Root\n onSuccess={onAddPaymentMethodSuccess}\n cancelAction={close}\n >\n <AddPaymentMethod.FormHeader\n text={localizationKeys(`${localizationRoot}.billingPage.paymentMethodsSection.add`)}\n />\n <AddPaymentMethod.FormSubtitle\n text={localizationKeys(`${localizationRoot}.billingPage.paymentMethodsSection.addSubtitle`)}\n />\n <DevOnly>\n <TestPaymentMethod />\n </DevOnly>\n </AddPaymentMethod.Root>\n );\n});\n\nconst RemoveScreen = ({\n paymentMethod,\n revalidate,\n}: {\n paymentMethod: BillingPaymentMethodResource;\n revalidate: () => void;\n}) => {\n const { close } = useActionContext();\n const card = useCardState();\n const subscriberType = useSubscriberTypeContext();\n const localizationRoot = useSubscriberTypeLocalizationRoot();\n const ref = useRef(\n `${paymentMethod.paymentType === 'card' ? paymentMethod.cardType : paymentMethod.paymentType} ${paymentMethod.paymentType === 'card' ? `⋯ ${paymentMethod.last4}` : '-'}`,\n );\n // Do not use `useOrganization` to avoid triggering the in-app enable organizations prompt in development instance\n const organizationCtx = useOrganizationContext();\n\n if (!ref.current) {\n return null;\n }\n\n const removePaymentMethod = async () => {\n await paymentMethod\n .remove({ orgId: subscriberType === 'organization' ? organizationCtx?.organization?.id : undefined })\n .then(revalidate)\n .catch((error: any) => {\n handleError(error, [], card.setError);\n });\n };\n\n return (\n <RemoveResourceForm\n title={localizationKeys(`${localizationRoot}.billingPage.paymentMethodsSection.removeMethod.title`)}\n messageLine1={localizationKeys(\n `${localizationRoot}.billingPage.paymentMethodsSection.removeMethod.messageLine1`,\n {\n identifier: ref.current,\n },\n )}\n messageLine2={localizationKeys(`${localizationRoot}.billingPage.paymentMethodsSection.removeMethod.messageLine2`)}\n successMessage={localizationKeys(\n `${localizationRoot}.billingPage.paymentMethodsSection.removeMethod.successMessage`,\n {\n paymentMethod: ref.current,\n },\n )}\n deleteResource={removePaymentMethod}\n onSuccess={close}\n onReset={close}\n />\n );\n};\n\nexport const PaymentMethods = withCardStateProvider(() => {\n const clerk = useClerk();\n const subscriberType = useSubscriberTypeContext();\n const localizationRoot = useSubscriberTypeLocalizationRoot();\n const resource = subscriberType === 'organization' ? clerk?.organization : clerk.user;\n\n const { data: paymentMethods, isLoading, revalidate: revalidatePaymentMethods } = usePaymentMethods();\n\n const sortedPaymentMethods = useMemo(\n () => paymentMethods.sort((a, b) => (a.isDefault && !b.isDefault ? -1 : 1)),\n [paymentMethods],\n );\n\n if (!resource) {\n return null;\n }\n\n if (__BUILD_DISABLE_RHC__ && sortedPaymentMethods.length === 0) {\n return null;\n }\n\n return (\n <ProfileSection.Root\n title={localizationKeys(`${localizationRoot}.billingPage.paymentMethodsSection.title`)}\n centered={false}\n id='paymentMethods'\n sx={t => ({\n flex: 1,\n borderTopWidth: t.borderWidths.$normal,\n borderTopStyle: t.borderStyles.$solid,\n borderTopColor: t.colors.$borderAlpha100,\n })}\n >\n <Action.Root>\n <ProfileSection.ItemList\n id='paymentMethods'\n disableAnimation\n >\n {isLoading ? (\n <FullHeightLoader />\n ) : (\n <>\n {sortedPaymentMethods.map(paymentMethod => (\n <Fragment key={paymentMethod.id}>\n <ProfileSection.Item id='paymentMethods'>\n <PaymentMethodRow paymentMethod={paymentMethod} />\n <PaymentMethodMenu\n paymentMethod={paymentMethod}\n revalidate={revalidatePaymentMethods}\n />\n </ProfileSection.Item>\n\n <Action.Open value={`remove-${paymentMethod.id}`}>\n <Action.Card variant='destructive'>\n <RemoveScreen\n paymentMethod={paymentMethod}\n revalidate={revalidatePaymentMethods}\n />\n </Action.Card>\n </Action.Open>\n </Fragment>\n ))}\n {__BUILD_DISABLE_RHC__ ? null : (\n <>\n <Action.Trigger value='add'>\n <ProfileSection.ArrowButton\n id='paymentMethods'\n localizationKey={localizationKeys(`${localizationRoot}.billingPage.paymentMethodsSection.add`)}\n />\n </Action.Trigger>\n <Action.Open value='add'>\n <Action.Card>\n <AddScreen onSuccess={revalidatePaymentMethods} />\n </Action.Card>\n </Action.Open>\n </>\n )}\n </>\n )}\n </ProfileSection.ItemList>\n </Action.Root>\n </ProfileSection.Root>\n );\n});\n\nconst PaymentMethodMenu = ({\n paymentMethod,\n revalidate,\n}: {\n paymentMethod: BillingPaymentMethodResource;\n revalidate: () => void;\n}) => {\n const { open } = useActionContext();\n const card = useCardState();\n const subscriberType = useSubscriberTypeContext();\n const localizationRoot = useSubscriberTypeLocalizationRoot();\n // Do not use `useOrganization` to avoid triggering the in-app enable organizations prompt in development instance\n const organizationCtx = useOrganizationContext();\n\n const actions = [\n {\n label: localizationKeys(`${localizationRoot}.billingPage.paymentMethodsSection.actionLabel__remove`),\n isDestructive: true,\n onClick: () => open(`remove-${paymentMethod.id}`),\n isDisabled: !paymentMethod.isRemovable,\n },\n ];\n\n if (!paymentMethod.isDefault) {\n actions.unshift({\n label: localizationKeys(`${localizationRoot}.billingPage.paymentMethodsSection.actionLabel__default`),\n isDestructive: false,\n onClick: () => {\n paymentMethod\n .makeDefault({ orgId: subscriberType === 'organization' ? organizationCtx?.organization?.id : undefined })\n .then(revalidate)\n .catch((error: Error) => {\n handleError(error, [], card.setError);\n });\n },\n isDisabled: false,\n });\n }\n\n return <ThreeDotsMenu actions={actions} />;\n};\n"],"mappings":"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"}
1	+ {"version":3,"file":"PaymentMethods.js","names":["AddPaymentMethod.Root","AddPaymentMethod.FormHeader","AddPaymentMethod.FormSubtitle"],"sources":["../../../src/components/PaymentMethods/PaymentMethods.tsx"],"sourcesContent":["import { useClerk, useOrganizationContext } from '@clerk/shared/react';\nimport type { BillingPaymentMethodResource } from '@clerk/shared/types';\nimport { Fragment, useMemo, useRef } from 'react';\n\nimport { useCardState, withCardStateProvider } from '@/ui/elements/contexts';\nimport { FullHeightLoader } from '@/ui/elements/FullHeightLoader';\nimport { ProfileSection } from '@/ui/elements/Section';\nimport { ThreeDotsMenu } from '@/ui/elements/ThreeDotsMenu';\nimport { handleError } from '@/ui/utils/errorHandler';\n\nimport { RemoveResourceForm } from '../../common';\nimport { DevOnly } from '../../common/DevOnly';\nimport { usePaymentMethods, useSubscriberTypeContext, useSubscriberTypeLocalizationRoot } from '../../contexts';\nimport { localizationKeys } from '../../customizables';\nimport { Action } from '../../elements/Action';\nimport { useActionContext } from '../../elements/Action/ActionRoot';\nimport * as AddPaymentMethod from './AddPaymentMethod';\nimport { PaymentMethodRow } from './PaymentMethodRow';\nimport { TestPaymentMethod } from './TestPaymentMethod';\n\nconst AddScreen = withCardStateProvider(({ onSuccess }: { onSuccess: () => void }) => {\n const { close } = useActionContext();\n const clerk = useClerk();\n const subscriberType = useSubscriberTypeContext();\n const localizationRoot = useSubscriberTypeLocalizationRoot();\n\n const onAddPaymentMethodSuccess = async (context: { gateway: 'stripe'; paymentToken: string }) => {\n const resource = subscriberType === 'organization' ? clerk?.organization : clerk.user;\n await resource?.addPaymentMethod(context);\n onSuccess();\n close();\n return Promise.resolve();\n };\n\n return (\n <AddPaymentMethod.Root\n onSuccess={onAddPaymentMethodSuccess}\n cancelAction={close}\n >\n <AddPaymentMethod.FormHeader\n text={localizationKeys(`${localizationRoot}.billingPage.paymentMethodsSection.add`)}\n />\n <AddPaymentMethod.FormSubtitle\n text={localizationKeys(`${localizationRoot}.billingPage.paymentMethodsSection.addSubtitle`)}\n />\n <DevOnly>\n <TestPaymentMethod />\n </DevOnly>\n </AddPaymentMethod.Root>\n );\n});\n\nconst RemoveScreen = ({\n paymentMethod,\n revalidate,\n}: {\n paymentMethod: BillingPaymentMethodResource;\n revalidate: () => void;\n}) => {\n const { close } = useActionContext();\n const card = useCardState();\n const subscriberType = useSubscriberTypeContext();\n const localizationRoot = useSubscriberTypeLocalizationRoot();\n const ref = useRef(\n `${paymentMethod.paymentType === 'card' ? paymentMethod.cardType : paymentMethod.paymentType} ${paymentMethod.paymentType === 'card' ? `⋯ ${paymentMethod.last4}` : '-'}`,\n );\n // Do not use `useOrganization` to avoid triggering the in-app enable organizations prompt in development instance\n const organizationCtx = useOrganizationContext();\n\n if (!ref.current) {\n return null;\n }\n\n const removePaymentMethod = async () => {\n await paymentMethod\n .remove({ orgId: subscriberType === 'organization' ? organizationCtx?.organization?.id : undefined })\n .then(revalidate)\n .catch((error: any) => {\n handleError(error, [], card.setError);\n });\n };\n\n return (\n <RemoveResourceForm\n title={localizationKeys(`${localizationRoot}.billingPage.paymentMethodsSection.removeMethod.title`)}\n messageLine1={localizationKeys(\n `${localizationRoot}.billingPage.paymentMethodsSection.removeMethod.messageLine1`,\n {\n identifier: ref.current,\n },\n )}\n messageLine2={localizationKeys(`${localizationRoot}.billingPage.paymentMethodsSection.removeMethod.messageLine2`)}\n successMessage={localizationKeys(\n `${localizationRoot}.billingPage.paymentMethodsSection.removeMethod.successMessage`,\n {\n paymentMethod: ref.current,\n },\n )}\n deleteResource={removePaymentMethod}\n onSuccess={close}\n onReset={close}\n />\n );\n};\n\nexport const PaymentMethods = withCardStateProvider(() => {\n const clerk = useClerk();\n const subscriberType = useSubscriberTypeContext();\n const localizationRoot = useSubscriberTypeLocalizationRoot();\n const resource = subscriberType === 'organization' ? clerk?.organization : clerk.user;\n\n const { data: paymentMethods, isLoading, revalidate: revalidatePaymentMethods } = usePaymentMethods();\n\n const sortedPaymentMethods = useMemo(\n () => paymentMethods.sort((a, b) => (a.isDefault && !b.isDefault ? -1 : 1)),\n [paymentMethods],\n );\n\n if (!resource) {\n return null;\n }\n\n if (__BUILD_DISABLE_RHC__ && sortedPaymentMethods.length === 0) {\n return null;\n }\n\n return (\n <ProfileSection.Root\n title={localizationKeys(`${localizationRoot}.billingPage.paymentMethodsSection.title`)}\n centered={false}\n id='paymentMethods'\n sx={t => ({\n flex: 1,\n borderTopWidth: t.borderWidths.$normal,\n borderTopStyle: t.borderStyles.$solid,\n borderTopColor: t.colors.$borderAlpha100,\n })}\n >\n <Action.Root>\n <ProfileSection.ItemList\n id='paymentMethods'\n disableAnimation\n >\n {isLoading ? (\n <FullHeightLoader />\n ) : (\n <>\n {sortedPaymentMethods.map(paymentMethod => (\n <Fragment key={paymentMethod.id}>\n <ProfileSection.Item id='paymentMethods'>\n <PaymentMethodRow paymentMethod={paymentMethod} />\n <PaymentMethodMenu\n paymentMethod={paymentMethod}\n revalidate={revalidatePaymentMethods}\n />\n </ProfileSection.Item>\n\n <Action.Open value={`remove-${paymentMethod.id}`}>\n <Action.Card variant='destructive'>\n <RemoveScreen\n paymentMethod={paymentMethod}\n revalidate={revalidatePaymentMethods}\n />\n </Action.Card>\n </Action.Open>\n </Fragment>\n ))}\n {__BUILD_DISABLE_RHC__ ? null : (\n <>\n <Action.Trigger value='add'>\n <ProfileSection.ArrowButton\n id='paymentMethods'\n localizationKey={localizationKeys(`${localizationRoot}.billingPage.paymentMethodsSection.add`)}\n />\n </Action.Trigger>\n <Action.Open value='add'>\n <Action.Card>\n <AddScreen onSuccess={revalidatePaymentMethods} />\n </Action.Card>\n </Action.Open>\n </>\n )}\n </>\n )}\n </ProfileSection.ItemList>\n </Action.Root>\n </ProfileSection.Root>\n );\n});\n\nconst PaymentMethodMenu = ({\n paymentMethod,\n revalidate,\n}: {\n paymentMethod: BillingPaymentMethodResource;\n revalidate: () => void;\n}) => {\n const { open } = useActionContext();\n const card = useCardState();\n const subscriberType = useSubscriberTypeContext();\n const localizationRoot = useSubscriberTypeLocalizationRoot();\n // Do not use `useOrganization` to avoid triggering the in-app enable organizations prompt in development instance\n const organizationCtx = useOrganizationContext();\n\n const actions = [\n {\n label: localizationKeys(`${localizationRoot}.billingPage.paymentMethodsSection.actionLabel__remove`),\n isDestructive: true,\n onClick: () => open(`remove-${paymentMethod.id}`),\n isDisabled: !paymentMethod.isRemovable,\n },\n ];\n\n if (!paymentMethod.isDefault) {\n actions.unshift({\n label: localizationKeys(`${localizationRoot}.billingPage.paymentMethodsSection.actionLabel__default`),\n isDestructive: false,\n onClick: () => {\n paymentMethod\n .makeDefault({ orgId: subscriberType === 'organization' ? organizationCtx?.organization?.id : undefined })\n .then(revalidate)\n .catch((error: Error) => {\n handleError(error, [], card.setError);\n });\n },\n isDisabled: false,\n });\n }\n\n return <ThreeDotsMenu actions={actions} />;\n};\n"],"mappings":"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"}

package/dist/components/PricingTable/PricingTableMatrix.js CHANGED Viewed

@@ -19,7 +19,7 @@ import { Fragment as Fragment$1, jsx, jsxs } from "@emotion/react/jsx-runtime";
 //#region src/components/PricingTable/PricingTableMatrix.tsx
 function PricingTableMatrix({ plans = [], planPeriod, setPlanPeriod, onSelect, highlightedPlan }) {
 	const prefersReducedMotion = usePrefersReducedMotion();
-	const { animations: layoutAnimations } = useAppearance().parsedLayout;
+	const { animations: layoutAnimations } = useAppearance().parsedOptions;
 	const isMotionSafe = !prefersReducedMotion && layoutAnimations === true;
 	const segmentedControlId = `${React$1.useId()}-segmented-control`;
 	const { buttonPropsForPlan } = usePlansContext();

package/dist/components/PricingTable/PricingTableMatrix.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PricingTableMatrix.js","names":["React","feePeriodNoticeAnimation: ThemableCssProp","t","highlightBackgroundColor: ThemableCssProp","InformationCircle","Check"],"sources":["../../../src/components/PricingTable/PricingTableMatrix.tsx"],"sourcesContent":["import type { BillingPlanResource, BillingSubscriptionPlanPeriod } from '@clerk/shared/types';\nimport * as React from 'react';\n\nimport { Avatar } from '@/ui/elements/Avatar';\nimport { SegmentedControl } from '@/ui/elements/SegmentedControl';\nimport { colors } from '@/ui/utils/colors';\n\nimport { usePlansContext } from '../../contexts';\nimport {\n Badge,\n Box,\n Button,\n descriptors,\n Flex,\n Heading,\n Icon,\n localizationKeys,\n Span,\n Text,\n useAppearance,\n useLocalizations,\n} from '../../customizables';\nimport { usePrefersReducedMotion } from '../../hooks';\nimport { Check, InformationCircle } from '../../icons';\nimport { common, InternalThemeProvider, mqu, type ThemableCssProp } from '../../styledSystem';\n\ninterface PricingTableMatrixProps {\n plans: BillingPlanResource[] \| undefined;\n highlightedPlan?: BillingPlanResource['slug'];\n planPeriod: BillingSubscriptionPlanPeriod;\n setPlanPeriod: (val: BillingSubscriptionPlanPeriod) => void;\n onSelect: (plan: BillingPlanResource, event?: React.MouseEvent<HTMLElement>) => void;\n}\n\nexport function PricingTableMatrix({\n plans = [],\n planPeriod,\n setPlanPeriod,\n onSelect,\n highlightedPlan,\n}: PricingTableMatrixProps) {\n const prefersReducedMotion = usePrefersReducedMotion();\n const { animations: layoutAnimations } = useAppearance().parsedLayout;\n const isMotionSafe = !prefersReducedMotion && layoutAnimations === true;\n const pricingTableMatrixId = React.useId();\n const segmentedControlId = `${pricingTableMatrixId}-segmented-control`;\n\n const { buttonPropsForPlan } = usePlansContext();\n const { t } = useLocalizations();\n\n const feePeriodNoticeAnimation: ThemableCssProp = t => ({\n transition: isMotionSafe\n ? `grid-template-rows ${t.transitionDuration.$slower} ${t.transitionTiming.$slowBezier}`\n : 'none',\n });\n\n const highlightBackgroundColor: ThemableCssProp = t => ({\n background: common.mergedColorsBackground(colors.setAlpha(t.colors.$colorBackground, 1), t.colors.$neutralAlpha25),\n });\n\n const gridTemplateColumns = React.useMemo(() => `repeat(${plans.length + 1}, minmax(9.375rem,1fr))`, [plans.length]);\n\n const renderBillingCycleControls = React.useMemo(() => plans.some(plan => Boolean(plan.annualMonthlyFee)), [plans]);\n\n const getAllFeatures = React.useMemo(() => {\n const featuresSet = new Set<string>();\n plans.forEach(({ features }) => {\n features.forEach(({ name }) => featuresSet.add(name));\n });\n return Array.from(featuresSet);\n }, [plans]);\n\n if (!plans.length) {\n return null;\n }\n\n return (\n <InternalThemeProvider>\n <Box\n elementDescriptor={descriptors.pricingTableMatrix}\n sx={t => ({\n position: 'relative',\n minWidth: '100%',\n display: 'grid',\n isolation: 'isolate',\n backgroundColor: t.colors.$colorBackground,\n [mqu.md]: {\n overflowX: 'auto',\n },\n })}\n >\n <Box\n elementDescriptor={descriptors.pricingTableMatrixTable}\n role='table'\n >\n <Box\n elementDescriptor={[descriptors.pricingTableMatrixRowGroup, descriptors.pricingTableMatrixRowGroupHeader]}\n role='rowgroup'\n sx={t => ({\n position: 'sticky',\n top: 0,\n backgroundColor: t.colors.$colorBackground,\n borderBottomWidth: t.borderWidths.$normal,\n borderBottomStyle: t.borderStyles.$solid,\n borderBottomColor: t.colors.$borderAlpha100,\n zIndex: 1,\n })}\n >\n <Box\n elementDescriptor={[descriptors.pricingTableMatrixRow, descriptors.pricingTableMatrixRowHeader]}\n role='row'\n sx={{\n display: 'grid',\n gridTemplateColumns,\n }}\n >\n <Box\n elementDescriptor={descriptors.pricingTableMatrixColumnHeader}\n role='columnheader'\n sx={t => ({\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'flex-start',\n justifyContent: 'flex-end',\n rowGap: t.space.$3,\n paddingBlockEnd: t.space.$12,\n paddingInlineStart: t.space.$3,\n })}\n >\n {renderBillingCycleControls ? (\n <>\n <Text\n id={segmentedControlId}\n colorScheme='secondary'\n variant='caption'\n localizationKey={localizationKeys('billing.pricingTable.billingCycle')}\n >\n Billing cycle\n </Text>\n <SegmentedControl.Root\n aria-labelledby={segmentedControlId}\n value={planPeriod}\n onChange={value => setPlanPeriod(value as BillingSubscriptionPlanPeriod)}\n >\n <SegmentedControl.Button\n value='month'\n text={localizationKeys('billing.monthly')}\n />\n <SegmentedControl.Button\n value='annual'\n text={localizationKeys('billing.annually')}\n />\n </SegmentedControl.Root>\n </>\n ) : null}\n </Box>\n {plans.map(plan => {\n const highlight = plan.slug === highlightedPlan;\n const planFee = !plan.annualMonthlyFee\n ? plan.fee\n : planPeriod === 'annual'\n ? plan.annualMonthlyFee\n : plan.fee;\n\n return (\n <Box\n elementDescriptor={descriptors.pricingTableMatrixColumnHeader}\n key={plan.slug}\n role='columnheader'\n sx={[\n t => ({\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'flex-start',\n flex: 1,\n borderStartStartRadius: t.radii.$xl,\n borderStartEndRadius: t.radii.$xl,\n }),\n highlight && highlightBackgroundColor,\n ]}\n data-highlighted={highlight}\n >\n <Box\n sx={t => ({\n width: '100%',\n padding: t.space.$4,\n })}\n >\n {plan.avatarUrl \|\| highlight ? (\n <Span\n sx={t => ({\n width: '100%',\n display: 'flex',\n alignItems: 'flex-start',\n justifyContent: 'space-between',\n marginBlockEnd: t.space.$3,\n })}\n >\n {plan.avatarUrl ? (\n <Avatar\n elementDescriptor={descriptors.pricingTableMatrixAvatar}\n size={_ => 40}\n title={plan.name}\n initials={plan.name[0]}\n rounded={false}\n imageUrl={plan.avatarUrl}\n />\n ) : null}\n {highlight ? (\n <Badge\n elementDescriptor={descriptors.pricingTableMatrixBadge}\n colorScheme='secondary'\n localizationKey={localizationKeys('billing.popular')}\n />\n ) : null}\n </Span>\n ) : null}\n <Heading\n elementDescriptor={descriptors.pricingTableMatrixPlanName}\n textVariant='h3'\n >\n {plan.name}\n </Heading>\n <Flex\n align='center'\n wrap='wrap'\n sx={t => ({\n marginTop: t.space.$2,\n columnGap: t.space.$1x5,\n })}\n >\n {plan.hasBaseFee ? (\n <>\n <Text\n elementDescriptor={descriptors.pricingTableMatrixFee}\n variant='h2'\n colorScheme='body'\n >\n {planFee.currencySymbol}\n {planFee.amountFormatted}\n </Text>\n <Text\n elementDescriptor={descriptors.pricingTableMatrixFeePeriod}\n variant='caption'\n colorScheme='secondary'\n sx={t => ({\n textTransform: 'lowercase',\n ':before': {\n content: '\"/\"',\n marginInlineEnd: t.space.$1,\n },\n })}\n localizationKey={localizationKeys('billing.month')}\n />\n {plan.annualMonthlyFee ? (\n <Box\n elementDescriptor={descriptors.pricingTableMatrixFeePeriodNotice}\n sx={[\n _ => ({\n width: '100%',\n display: 'grid',\n gridTemplateRows: planPeriod === 'annual' ? '1fr' : '0fr',\n }),\n feePeriodNoticeAnimation,\n ]}\n // @ts-ignore - Needed until React 19 support\n inert={planPeriod !== 'annual' ? 'true' : undefined}\n >\n <Box\n elementDescriptor={descriptors.pricingTableMatrixFeePeriodNoticeInner}\n sx={{\n overflow: 'hidden',\n minHeight: 0,\n }}\n >\n <Text\n elementDescriptor={descriptors.pricingTableMatrixFeePeriodNoticeLabel}\n variant='caption'\n colorScheme='secondary'\n sx={t => ({\n width: '100%',\n display: 'flex',\n alignItems: 'center',\n columnGap: t.space.$1,\n })}\n >\n <Icon\n icon={InformationCircle}\n colorScheme='neutral'\n size='sm'\n aria-hidden\n />{' '}\n <Span localizationKey={localizationKeys('billing.billedAnnually')} />\n </Text>\n </Box>\n </Box>\n ) : null}\n </>\n ) : (\n <Text\n elementDescriptor={descriptors.pricingTableMatrixFee}\n variant='h2'\n localizationKey={localizationKeys('billing.free')}\n colorScheme='body'\n />\n )}\n </Flex>\n </Box>\n {!plan.isDefault ? (\n <Box\n sx={t => ({\n width: '100%',\n marginBlockStart: 'auto',\n marginBlockEnd: t.space.$8,\n paddingBlockStart: t.space.$2,\n paddingBlockEnd: t.space.$4,\n paddingInline: t.space.$4,\n })}\n >\n <Button\n block\n textVariant='buttonSmall'\n size='xs'\n onClick={event => {\n onSelect(plan, event);\n }}\n {...buttonPropsForPlan({ plan, selectedPlanPeriod: planPeriod })}\n colorScheme={highlight ? 'primary' : 'secondary'}\n />\n </Box>\n ) : null}\n </Box>\n );\n })}\n </Box>\n </Box>\n <Box\n elementDescriptor={[descriptors.pricingTableMatrixRowGroup, descriptors.pricingTableMatrixRowGroupBody]}\n role='rowgroup'\n >\n {getAllFeatures.map(feature => {\n return (\n <Box\n elementDescriptor={[descriptors.pricingTableMatrixRow, descriptors.pricingTableMatrixRowBody]}\n key={feature}\n role='row'\n sx={t => ({\n position: 'relative',\n display: 'grid',\n gridTemplateColumns,\n borderBottomWidth: t.borderWidths.$normal,\n borderBottomStyle: t.borderStyles.$solid,\n borderBottomColor: t.colors.$borderAlpha100,\n ':after': {\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n pointerEvents: 'none',\n backgroundColor: t.colors.$neutralAlpha25,\n opacity: 0,\n },\n ':hover:after': {\n opacity: 1,\n },\n })}\n >\n <Box\n elementDescriptor={descriptors.pricingTableMatrixCell}\n role='cell'\n sx={t => ({\n padding: t.space.$3,\n })}\n >\n <Text colorScheme='body'>{feature}</Text>\n </Box>\n {plans.map(plan => {\n const highlight = plan.slug === highlightedPlan;\n const hasFeature = plan.features.some(f => f.name === feature);\n return (\n <Box\n elementDescriptor={descriptors.pricingTableMatrixCell}\n key={plan.slug}\n role='cell'\n sx={[\n t => ({\n display: 'grid',\n placeContent: 'center',\n padding: t.space.$3,\n }),\n highlight && highlightBackgroundColor,\n ]}\n data-highlighted={highlight}\n data-checked={hasFeature}\n >\n {hasFeature && (\n <Icon\n icon={Check}\n colorScheme='neutral'\n size='sm'\n aria-label={t(localizationKeys('billing.pricingTable.included'))}\n />\n )}\n </Box>\n );\n })}\n </Box>\n );\n })}\n <Box\n elementDescriptor={descriptors.pricingTableMatrixFooter}\n sx={{\n display: 'grid',\n gridTemplateColumns,\n }}\n >\n <Box elementDescriptor={[descriptors.pricingTableMatrixCell, descriptors.pricingTableMatrixCellFooter]} />\n {plans.map(plan => {\n const highlight = plan.slug === highlightedPlan;\n return (\n <Box\n elementDescriptor={[descriptors.pricingTableMatrixCell, descriptors.pricingTableMatrixCellFooter]}\n key={plan.slug}\n sx={[\n t => ({\n height: t.space.$10,\n borderEndStartRadius: t.radii.$xl,\n borderEndEndRadius: t.radii.$xl,\n }),\n highlight && highlightBackgroundColor,\n ]}\n data-highlighted={highlight}\n />\n );\n })}\n </Box>\n </Box>\n </Box>\n </Box>\n </InternalThemeProvider>\n );\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"PricingTableMatrix.js","names":["React","feePeriodNoticeAnimation: ThemableCssProp","t","highlightBackgroundColor: ThemableCssProp","InformationCircle","Check"],"sources":["../../../src/components/PricingTable/PricingTableMatrix.tsx"],"sourcesContent":["import type { BillingPlanResource, BillingSubscriptionPlanPeriod } from '@clerk/shared/types';\nimport * as React from 'react';\n\nimport { Avatar } from '@/ui/elements/Avatar';\nimport { SegmentedControl } from '@/ui/elements/SegmentedControl';\nimport { colors } from '@/ui/utils/colors';\n\nimport { usePlansContext } from '../../contexts';\nimport {\n Badge,\n Box,\n Button,\n descriptors,\n Flex,\n Heading,\n Icon,\n localizationKeys,\n Span,\n Text,\n useAppearance,\n useLocalizations,\n} from '../../customizables';\nimport { usePrefersReducedMotion } from '../../hooks';\nimport { Check, InformationCircle } from '../../icons';\nimport { common, InternalThemeProvider, mqu, type ThemableCssProp } from '../../styledSystem';\n\ninterface PricingTableMatrixProps {\n plans: BillingPlanResource[] \| undefined;\n highlightedPlan?: BillingPlanResource['slug'];\n planPeriod: BillingSubscriptionPlanPeriod;\n setPlanPeriod: (val: BillingSubscriptionPlanPeriod) => void;\n onSelect: (plan: BillingPlanResource, event?: React.MouseEvent<HTMLElement>) => void;\n}\n\nexport function PricingTableMatrix({\n plans = [],\n planPeriod,\n setPlanPeriod,\n onSelect,\n highlightedPlan,\n}: PricingTableMatrixProps) {\n const prefersReducedMotion = usePrefersReducedMotion();\n const { animations: layoutAnimations } = useAppearance().parsedOptions;\n const isMotionSafe = !prefersReducedMotion && layoutAnimations === true;\n const pricingTableMatrixId = React.useId();\n const segmentedControlId = `${pricingTableMatrixId}-segmented-control`;\n\n const { buttonPropsForPlan } = usePlansContext();\n const { t } = useLocalizations();\n\n const feePeriodNoticeAnimation: ThemableCssProp = t => ({\n transition: isMotionSafe\n ? `grid-template-rows ${t.transitionDuration.$slower} ${t.transitionTiming.$slowBezier}`\n : 'none',\n });\n\n const highlightBackgroundColor: ThemableCssProp = t => ({\n background: common.mergedColorsBackground(colors.setAlpha(t.colors.$colorBackground, 1), t.colors.$neutralAlpha25),\n });\n\n const gridTemplateColumns = React.useMemo(() => `repeat(${plans.length + 1}, minmax(9.375rem,1fr))`, [plans.length]);\n\n const renderBillingCycleControls = React.useMemo(() => plans.some(plan => Boolean(plan.annualMonthlyFee)), [plans]);\n\n const getAllFeatures = React.useMemo(() => {\n const featuresSet = new Set<string>();\n plans.forEach(({ features }) => {\n features.forEach(({ name }) => featuresSet.add(name));\n });\n return Array.from(featuresSet);\n }, [plans]);\n\n if (!plans.length) {\n return null;\n }\n\n return (\n <InternalThemeProvider>\n <Box\n elementDescriptor={descriptors.pricingTableMatrix}\n sx={t => ({\n position: 'relative',\n minWidth: '100%',\n display: 'grid',\n isolation: 'isolate',\n backgroundColor: t.colors.$colorBackground,\n [mqu.md]: {\n overflowX: 'auto',\n },\n })}\n >\n <Box\n elementDescriptor={descriptors.pricingTableMatrixTable}\n role='table'\n >\n <Box\n elementDescriptor={[descriptors.pricingTableMatrixRowGroup, descriptors.pricingTableMatrixRowGroupHeader]}\n role='rowgroup'\n sx={t => ({\n position: 'sticky',\n top: 0,\n backgroundColor: t.colors.$colorBackground,\n borderBottomWidth: t.borderWidths.$normal,\n borderBottomStyle: t.borderStyles.$solid,\n borderBottomColor: t.colors.$borderAlpha100,\n zIndex: 1,\n })}\n >\n <Box\n elementDescriptor={[descriptors.pricingTableMatrixRow, descriptors.pricingTableMatrixRowHeader]}\n role='row'\n sx={{\n display: 'grid',\n gridTemplateColumns,\n }}\n >\n <Box\n elementDescriptor={descriptors.pricingTableMatrixColumnHeader}\n role='columnheader'\n sx={t => ({\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'flex-start',\n justifyContent: 'flex-end',\n rowGap: t.space.$3,\n paddingBlockEnd: t.space.$12,\n paddingInlineStart: t.space.$3,\n })}\n >\n {renderBillingCycleControls ? (\n <>\n <Text\n id={segmentedControlId}\n colorScheme='secondary'\n variant='caption'\n localizationKey={localizationKeys('billing.pricingTable.billingCycle')}\n >\n Billing cycle\n </Text>\n <SegmentedControl.Root\n aria-labelledby={segmentedControlId}\n value={planPeriod}\n onChange={value => setPlanPeriod(value as BillingSubscriptionPlanPeriod)}\n >\n <SegmentedControl.Button\n value='month'\n text={localizationKeys('billing.monthly')}\n />\n <SegmentedControl.Button\n value='annual'\n text={localizationKeys('billing.annually')}\n />\n </SegmentedControl.Root>\n </>\n ) : null}\n </Box>\n {plans.map(plan => {\n const highlight = plan.slug === highlightedPlan;\n const planFee = !plan.annualMonthlyFee\n ? plan.fee\n : planPeriod === 'annual'\n ? plan.annualMonthlyFee\n : plan.fee;\n\n return (\n <Box\n elementDescriptor={descriptors.pricingTableMatrixColumnHeader}\n key={plan.slug}\n role='columnheader'\n sx={[\n t => ({\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'flex-start',\n flex: 1,\n borderStartStartRadius: t.radii.$xl,\n borderStartEndRadius: t.radii.$xl,\n }),\n highlight && highlightBackgroundColor,\n ]}\n data-highlighted={highlight}\n >\n <Box\n sx={t => ({\n width: '100%',\n padding: t.space.$4,\n })}\n >\n {plan.avatarUrl \|\| highlight ? (\n <Span\n sx={t => ({\n width: '100%',\n display: 'flex',\n alignItems: 'flex-start',\n justifyContent: 'space-between',\n marginBlockEnd: t.space.$3,\n })}\n >\n {plan.avatarUrl ? (\n <Avatar\n elementDescriptor={descriptors.pricingTableMatrixAvatar}\n size={_ => 40}\n title={plan.name}\n initials={plan.name[0]}\n rounded={false}\n imageUrl={plan.avatarUrl}\n />\n ) : null}\n {highlight ? (\n <Badge\n elementDescriptor={descriptors.pricingTableMatrixBadge}\n colorScheme='secondary'\n localizationKey={localizationKeys('billing.popular')}\n />\n ) : null}\n </Span>\n ) : null}\n <Heading\n elementDescriptor={descriptors.pricingTableMatrixPlanName}\n textVariant='h3'\n >\n {plan.name}\n </Heading>\n <Flex\n align='center'\n wrap='wrap'\n sx={t => ({\n marginTop: t.space.$2,\n columnGap: t.space.$1x5,\n })}\n >\n {plan.hasBaseFee ? (\n <>\n <Text\n elementDescriptor={descriptors.pricingTableMatrixFee}\n variant='h2'\n colorScheme='body'\n >\n {planFee.currencySymbol}\n {planFee.amountFormatted}\n </Text>\n <Text\n elementDescriptor={descriptors.pricingTableMatrixFeePeriod}\n variant='caption'\n colorScheme='secondary'\n sx={t => ({\n textTransform: 'lowercase',\n ':before': {\n content: '\"/\"',\n marginInlineEnd: t.space.$1,\n },\n })}\n localizationKey={localizationKeys('billing.month')}\n />\n {plan.annualMonthlyFee ? (\n <Box\n elementDescriptor={descriptors.pricingTableMatrixFeePeriodNotice}\n sx={[\n _ => ({\n width: '100%',\n display: 'grid',\n gridTemplateRows: planPeriod === 'annual' ? '1fr' : '0fr',\n }),\n feePeriodNoticeAnimation,\n ]}\n // @ts-ignore - Needed until React 19 support\n inert={planPeriod !== 'annual' ? 'true' : undefined}\n >\n <Box\n elementDescriptor={descriptors.pricingTableMatrixFeePeriodNoticeInner}\n sx={{\n overflow: 'hidden',\n minHeight: 0,\n }}\n >\n <Text\n elementDescriptor={descriptors.pricingTableMatrixFeePeriodNoticeLabel}\n variant='caption'\n colorScheme='secondary'\n sx={t => ({\n width: '100%',\n display: 'flex',\n alignItems: 'center',\n columnGap: t.space.$1,\n })}\n >\n <Icon\n icon={InformationCircle}\n colorScheme='neutral'\n size='sm'\n aria-hidden\n />{' '}\n <Span localizationKey={localizationKeys('billing.billedAnnually')} />\n </Text>\n </Box>\n </Box>\n ) : null}\n </>\n ) : (\n <Text\n elementDescriptor={descriptors.pricingTableMatrixFee}\n variant='h2'\n localizationKey={localizationKeys('billing.free')}\n colorScheme='body'\n />\n )}\n </Flex>\n </Box>\n {!plan.isDefault ? (\n <Box\n sx={t => ({\n width: '100%',\n marginBlockStart: 'auto',\n marginBlockEnd: t.space.$8,\n paddingBlockStart: t.space.$2,\n paddingBlockEnd: t.space.$4,\n paddingInline: t.space.$4,\n })}\n >\n <Button\n block\n textVariant='buttonSmall'\n size='xs'\n onClick={event => {\n onSelect(plan, event);\n }}\n {...buttonPropsForPlan({ plan, selectedPlanPeriod: planPeriod })}\n colorScheme={highlight ? 'primary' : 'secondary'}\n />\n </Box>\n ) : null}\n </Box>\n );\n })}\n </Box>\n </Box>\n <Box\n elementDescriptor={[descriptors.pricingTableMatrixRowGroup, descriptors.pricingTableMatrixRowGroupBody]}\n role='rowgroup'\n >\n {getAllFeatures.map(feature => {\n return (\n <Box\n elementDescriptor={[descriptors.pricingTableMatrixRow, descriptors.pricingTableMatrixRowBody]}\n key={feature}\n role='row'\n sx={t => ({\n position: 'relative',\n display: 'grid',\n gridTemplateColumns,\n borderBottomWidth: t.borderWidths.$normal,\n borderBottomStyle: t.borderStyles.$solid,\n borderBottomColor: t.colors.$borderAlpha100,\n ':after': {\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n pointerEvents: 'none',\n backgroundColor: t.colors.$neutralAlpha25,\n opacity: 0,\n },\n ':hover:after': {\n opacity: 1,\n },\n })}\n >\n <Box\n elementDescriptor={descriptors.pricingTableMatrixCell}\n role='cell'\n sx={t => ({\n padding: t.space.$3,\n })}\n >\n <Text colorScheme='body'>{feature}</Text>\n </Box>\n {plans.map(plan => {\n const highlight = plan.slug === highlightedPlan;\n const hasFeature = plan.features.some(f => f.name === feature);\n return (\n <Box\n elementDescriptor={descriptors.pricingTableMatrixCell}\n key={plan.slug}\n role='cell'\n sx={[\n t => ({\n display: 'grid',\n placeContent: 'center',\n padding: t.space.$3,\n }),\n highlight && highlightBackgroundColor,\n ]}\n data-highlighted={highlight}\n data-checked={hasFeature}\n >\n {hasFeature && (\n <Icon\n icon={Check}\n colorScheme='neutral'\n size='sm'\n aria-label={t(localizationKeys('billing.pricingTable.included'))}\n />\n )}\n </Box>\n );\n })}\n </Box>\n );\n })}\n <Box\n elementDescriptor={descriptors.pricingTableMatrixFooter}\n sx={{\n display: 'grid',\n gridTemplateColumns,\n }}\n >\n <Box elementDescriptor={[descriptors.pricingTableMatrixCell, descriptors.pricingTableMatrixCellFooter]} />\n {plans.map(plan => {\n const highlight = plan.slug === highlightedPlan;\n return (\n <Box\n elementDescriptor={[descriptors.pricingTableMatrixCell, descriptors.pricingTableMatrixCellFooter]}\n key={plan.slug}\n sx={[\n t => ({\n height: t.space.$10,\n borderEndStartRadius: t.radii.$xl,\n borderEndEndRadius: t.radii.$xl,\n }),\n highlight && highlightBackgroundColor,\n ]}\n data-highlighted={highlight}\n />\n );\n })}\n </Box>\n </Box>\n </Box>\n </Box>\n </InternalThemeProvider>\n );\n}\n"],"mappings":"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"}

package/dist/components/SessionTasks/tasks/TaskResetPassword/index.js CHANGED Viewed

@@ -94,9 +94,9 @@ const TaskResetPasswordInternal = () => {
 		children: /* @__PURE__ */ jsx(Flow.Part, {
 			part: "resetPassword",
 			children: /* @__PURE__ */ jsxs(Card.Root, { children: [/* @__PURE__ */ jsxs(Card.Content, { children: [
-				/* @__PURE__ */ jsx(Header.Root, {
+				/* @__PURE__ */ jsxs(Header.Root, {
 					showLogo: true,
-					children: /* @__PURE__ */ jsx(Header.Title, { localizationKey: localizationKeys("taskResetPassword.title") })
+					children: [/* @__PURE__ */ jsx(Header.Title, { localizationKey: localizationKeys("taskResetPassword.title") }), /* @__PURE__ */ jsx(Header.Subtitle, { localizationKey: localizationKeys("taskResetPassword.subtitle") })]
 				}),
 				/* @__PURE__ */ jsx(Card.Alert, { children: card.error }),
 				/* @__PURE__ */ jsx(Col, {