From 0f32de739c33dd3cae8232e15b15191dedd1fec1 Mon Sep 17 00:00:00 2001 From: Vaggelis Yfantis Date: Wed, 30 Apr 2025 15:19:31 +0300 Subject: [PATCH 01/19] feat(vue,nuxt): Add __experimental_PricingTable # Conflicts: # integration/presets/longRunningApps.ts # integration/templates/nuxt-node/pages/pricing-table.vue # integration/templates/vue-vite/src/views/PricingTable.vue # package.json # packages/nuxt/src/module.ts # packages/nuxt/src/runtime/components/index.ts # packages/vue/src/components/index.ts --- integration/tests/pricing-table.test.ts | 2 +- .../components/ui-components/PircingTable.vue | 17 +++++++++++++++++ 2 files changed, 18 insertions(+), 1 deletion(-) create mode 100644 packages/vue/src/components/ui-components/PircingTable.vue diff --git a/integration/tests/pricing-table.test.ts b/integration/tests/pricing-table.test.ts index 3d203aa37cb..e75a1729194 100644 --- a/integration/tests/pricing-table.test.ts +++ b/integration/tests/pricing-table.test.ts @@ -66,7 +66,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withBilling] })('pricing tabl await frame.getByLabel('Card number').fill('4242424242424242'); await frame.getByLabel('Expiration date').fill('1234'); await frame.getByLabel('Security code').fill('123'); - await frame.getByLabel('ZIP code').fill('12345'); + // await frame.getByLabel('ZIP code').fill('12345'); await u.po.page.getByRole('button', { name: 'Pay $' }).click(); await expect(u.po.page.getByText('Payment was successful!')).toBeVisible(); diff --git a/packages/vue/src/components/ui-components/PircingTable.vue b/packages/vue/src/components/ui-components/PircingTable.vue new file mode 100644 index 00000000000..339dc0c2642 --- /dev/null +++ b/packages/vue/src/components/ui-components/PircingTable.vue @@ -0,0 +1,17 @@ + + + From 124cec2593c39cb959919453a1f3ce9ce3536aac Mon Sep 17 00:00:00 2001 From: Vaggelis Yfantis Date: Wed, 30 Apr 2025 17:44:48 +0300 Subject: [PATCH 02/19] fix(vue): Fix filename typo --- .../components/ui-components/PircingTable.vue | 17 ----------------- 1 file changed, 17 deletions(-) delete mode 100644 packages/vue/src/components/ui-components/PircingTable.vue diff --git a/packages/vue/src/components/ui-components/PircingTable.vue b/packages/vue/src/components/ui-components/PircingTable.vue deleted file mode 100644 index 339dc0c2642..00000000000 --- a/packages/vue/src/components/ui-components/PircingTable.vue +++ /dev/null @@ -1,17 +0,0 @@ - - - From d8d939cc904208af417e9e3a71f55de2b2c8806e Mon Sep 17 00:00:00 2001 From: Vaggelis Yfantis Date: Wed, 30 Apr 2025 19:21:45 +0300 Subject: [PATCH 03/19] fix(e2e): Enhance E2E reliability --- .../playwright/unstable/page-objects/commerce.ts | 16 ++++++++++++++++ .../playwright/unstable/page-objects/index.ts | 2 ++ 2 files changed, 18 insertions(+) create mode 100644 packages/testing/src/playwright/unstable/page-objects/commerce.ts diff --git a/packages/testing/src/playwright/unstable/page-objects/commerce.ts b/packages/testing/src/playwright/unstable/page-objects/commerce.ts new file mode 100644 index 00000000000..91709741593 --- /dev/null +++ b/packages/testing/src/playwright/unstable/page-objects/commerce.ts @@ -0,0 +1,16 @@ +import type { EnhancedPage } from './app'; +import { common } from './common'; + +export const createCommerceComponentPageObject = (testArgs: { page: EnhancedPage }) => { + const { page } = testArgs; + + const self = { + ...common(testArgs), + goToPricingTable: async (opts?: { searchParams?: URLSearchParams; headlessSelector?: string }) => { + await page.goToRelative('/pricing-table', { searchParams: opts?.searchParams }); + return await page.waitForURL(/pricing-table/); + }, + }; + + return self; +}; diff --git a/packages/testing/src/playwright/unstable/page-objects/index.ts b/packages/testing/src/playwright/unstable/page-objects/index.ts index 484b3075db0..1155ea81c67 100644 --- a/packages/testing/src/playwright/unstable/page-objects/index.ts +++ b/packages/testing/src/playwright/unstable/page-objects/index.ts @@ -2,6 +2,7 @@ import type { Page } from '@playwright/test'; import { createAppPageObject } from './app'; import { createClerkPageObject } from './clerk'; +import { createCommerceComponentPageObject } from './commerce'; import { createExpectPageObject } from './expect'; import { createImpersonationPageObject } from './impersonation'; import { createKeylessPopoverPageObject } from './keylessPopover'; @@ -42,5 +43,6 @@ export const createPageObjects = ({ userProfile: createUserProfileComponentPageObject(testArgs), userVerification: createUserVerificationComponentPageObject(testArgs), waitlist: createWaitlistComponentPageObject(testArgs), + commerce: createCommerceComponentPageObject(testArgs), }; }; From 856db162cd703a1c2e83e5195b26b404719b56ec Mon Sep 17 00:00:00 2001 From: Vaggelis Yfantis Date: Wed, 30 Apr 2025 19:43:45 +0300 Subject: [PATCH 04/19] chore(e2e): Change commerce to billing --- .../unstable/page-objects/{commerce.ts => billing.ts} | 2 +- .../testing/src/playwright/unstable/page-objects/index.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) rename packages/testing/src/playwright/unstable/page-objects/{commerce.ts => billing.ts} (82%) diff --git a/packages/testing/src/playwright/unstable/page-objects/commerce.ts b/packages/testing/src/playwright/unstable/page-objects/billing.ts similarity index 82% rename from packages/testing/src/playwright/unstable/page-objects/commerce.ts rename to packages/testing/src/playwright/unstable/page-objects/billing.ts index 91709741593..f020211b1db 100644 --- a/packages/testing/src/playwright/unstable/page-objects/commerce.ts +++ b/packages/testing/src/playwright/unstable/page-objects/billing.ts @@ -1,7 +1,7 @@ import type { EnhancedPage } from './app'; import { common } from './common'; -export const createCommerceComponentPageObject = (testArgs: { page: EnhancedPage }) => { +export const createBillingComponentPageObject = (testArgs: { page: EnhancedPage }) => { const { page } = testArgs; const self = { diff --git a/packages/testing/src/playwright/unstable/page-objects/index.ts b/packages/testing/src/playwright/unstable/page-objects/index.ts index 1155ea81c67..e5f2c354b85 100644 --- a/packages/testing/src/playwright/unstable/page-objects/index.ts +++ b/packages/testing/src/playwright/unstable/page-objects/index.ts @@ -1,8 +1,8 @@ import type { Page } from '@playwright/test'; import { createAppPageObject } from './app'; +import { createBillingComponentPageObject } from './billing'; import { createClerkPageObject } from './clerk'; -import { createCommerceComponentPageObject } from './commerce'; import { createExpectPageObject } from './expect'; import { createImpersonationPageObject } from './impersonation'; import { createKeylessPopoverPageObject } from './keylessPopover'; @@ -43,6 +43,6 @@ export const createPageObjects = ({ userProfile: createUserProfileComponentPageObject(testArgs), userVerification: createUserVerificationComponentPageObject(testArgs), waitlist: createWaitlistComponentPageObject(testArgs), - commerce: createCommerceComponentPageObject(testArgs), + billing: createBillingComponentPageObject(testArgs), }; }; From 378a88a584f436f444e364f5b2fada14c0854d52 Mon Sep 17 00:00:00 2001 From: Vaggelis Yfantis Date: Fri, 2 May 2025 07:48:44 +0300 Subject: [PATCH 05/19] test(e2e): Update tests --- .../playwright/unstable/page-objects/billing.ts | 16 ---------------- .../playwright/unstable/page-objects/index.ts | 2 -- 2 files changed, 18 deletions(-) delete mode 100644 packages/testing/src/playwright/unstable/page-objects/billing.ts diff --git a/packages/testing/src/playwright/unstable/page-objects/billing.ts b/packages/testing/src/playwright/unstable/page-objects/billing.ts deleted file mode 100644 index f020211b1db..00000000000 --- a/packages/testing/src/playwright/unstable/page-objects/billing.ts +++ /dev/null @@ -1,16 +0,0 @@ -import type { EnhancedPage } from './app'; -import { common } from './common'; - -export const createBillingComponentPageObject = (testArgs: { page: EnhancedPage }) => { - const { page } = testArgs; - - const self = { - ...common(testArgs), - goToPricingTable: async (opts?: { searchParams?: URLSearchParams; headlessSelector?: string }) => { - await page.goToRelative('/pricing-table', { searchParams: opts?.searchParams }); - return await page.waitForURL(/pricing-table/); - }, - }; - - return self; -}; diff --git a/packages/testing/src/playwright/unstable/page-objects/index.ts b/packages/testing/src/playwright/unstable/page-objects/index.ts index e5f2c354b85..484b3075db0 100644 --- a/packages/testing/src/playwright/unstable/page-objects/index.ts +++ b/packages/testing/src/playwright/unstable/page-objects/index.ts @@ -1,7 +1,6 @@ import type { Page } from '@playwright/test'; import { createAppPageObject } from './app'; -import { createBillingComponentPageObject } from './billing'; import { createClerkPageObject } from './clerk'; import { createExpectPageObject } from './expect'; import { createImpersonationPageObject } from './impersonation'; @@ -43,6 +42,5 @@ export const createPageObjects = ({ userProfile: createUserProfileComponentPageObject(testArgs), userVerification: createUserVerificationComponentPageObject(testArgs), waitlist: createWaitlistComponentPageObject(testArgs), - billing: createBillingComponentPageObject(testArgs), }; }; From 18ef27a72dd39456e755602fb98b140ebc331668 Mon Sep 17 00:00:00 2001 From: Vaggelis Yfantis Date: Fri, 2 May 2025 08:37:06 +0300 Subject: [PATCH 06/19] update tests --- integration/tests/pricing-table.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/integration/tests/pricing-table.test.ts b/integration/tests/pricing-table.test.ts index e75a1729194..3d203aa37cb 100644 --- a/integration/tests/pricing-table.test.ts +++ b/integration/tests/pricing-table.test.ts @@ -66,7 +66,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withBilling] })('pricing tabl await frame.getByLabel('Card number').fill('4242424242424242'); await frame.getByLabel('Expiration date').fill('1234'); await frame.getByLabel('Security code').fill('123'); - // await frame.getByLabel('ZIP code').fill('12345'); + await frame.getByLabel('ZIP code').fill('12345'); await u.po.page.getByRole('button', { name: 'Pay $' }).click(); await expect(u.po.page.getByText('Payment was successful!')).toBeVisible(); From 13cd8239acfc513b3967bec6e7ad426f24b1debf Mon Sep 17 00:00:00 2001 From: Vaggelis Yfantis Date: Wed, 30 Apr 2025 19:50:02 +0300 Subject: [PATCH 07/19] feat(astro): Introkduce <__experimental_PricingTable/> component --- .../interactive/InternalUIComponentRenderer.astro | 3 ++- .../interactive/PricingTable.astro | 8 ++++++++ packages/astro/src/react/uiComponents.tsx | 14 ++++++++++++++ 3 files changed, 24 insertions(+), 1 deletion(-) create mode 100644 packages/astro/src/astro-components/interactive/PricingTable.astro diff --git a/packages/astro/src/astro-components/interactive/InternalUIComponentRenderer.astro b/packages/astro/src/astro-components/interactive/InternalUIComponentRenderer.astro index 51da54a4c58..5b69e4eb914 100644 --- a/packages/astro/src/astro-components/interactive/InternalUIComponentRenderer.astro +++ b/packages/astro/src/astro-components/interactive/InternalUIComponentRenderer.astro @@ -11,7 +11,8 @@ interface Props { | 'user-button' | 'user-profile' | 'google-one-tap' - | 'waitlist'; + | 'waitlist' + | '__experimental_PricingTable'; } import { generateSafeId } from '@clerk/astro/internal'; diff --git a/packages/astro/src/astro-components/interactive/PricingTable.astro b/packages/astro/src/astro-components/interactive/PricingTable.astro new file mode 100644 index 00000000000..18d79afbb36 --- /dev/null +++ b/packages/astro/src/astro-components/interactive/PricingTable.astro @@ -0,0 +1,8 @@ +--- +import type { __experimental_PricingTableProps } from "@clerk/types"; +type Props = __experimental_PricingTableProps + +import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro' +--- + + diff --git a/packages/astro/src/react/uiComponents.tsx b/packages/astro/src/react/uiComponents.tsx index 9b7ad219cbb..718a5b2c787 100644 --- a/packages/astro/src/react/uiComponents.tsx +++ b/packages/astro/src/react/uiComponents.tsx @@ -1,4 +1,5 @@ import type { + __experimental_PricingTableProps, GoogleOneTapProps, OrganizationListProps, OrganizationProfileProps, @@ -185,3 +186,16 @@ export const Waitlist = withClerk(({ clerk, ...props }: WithClerkProp ); }, 'Waitlist'); + +export const __experimental_PricingTable = withClerk( + ({ clerk, ...props }: WithClerkProp<__experimental_PricingTableProps>) => { + return ( + + ); + }, + 'Waitlist', +); From 68cf11e386ae11180b5807f95998b78a999022ec Mon Sep 17 00:00:00 2001 From: Vaggelis Yfantis Date: Wed, 30 Apr 2025 19:51:45 +0300 Subject: [PATCH 08/19] fix(astro): Fix component name --- packages/astro/src/react/uiComponents.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/astro/src/react/uiComponents.tsx b/packages/astro/src/react/uiComponents.tsx index 718a5b2c787..912c38f1069 100644 --- a/packages/astro/src/react/uiComponents.tsx +++ b/packages/astro/src/react/uiComponents.tsx @@ -197,5 +197,5 @@ export const __experimental_PricingTable = withClerk( /> ); }, - 'Waitlist', + '__experimental_PricingTable', ); From 721710dfae76a07ca138db65b4df63e4694986e2 Mon Sep 17 00:00:00 2001 From: Vaggelis Yfantis Date: Wed, 30 Apr 2025 19:56:23 +0300 Subject: [PATCH 09/19] test(e2e): Add tests for Astro --- integration/presets/longRunningApps.ts | 1 + .../templates/astro-node/src/pages/pricing-table.astro | 10 ++++++++++ 2 files changed, 11 insertions(+) create mode 100644 integration/templates/astro-node/src/pages/pricing-table.astro diff --git a/integration/presets/longRunningApps.ts b/integration/presets/longRunningApps.ts index 8b48e960265..49ec2d7d480 100644 --- a/integration/presets/longRunningApps.ts +++ b/integration/presets/longRunningApps.ts @@ -46,6 +46,7 @@ export const createLongRunningApps = () => { { id: 'withBilling.next.appRouter', config: next.appRouter, env: envs.withBilling }, { id: 'withBillingStaging.vue.vite', config: vue.vite, env: envs.withBillingStaging }, { id: 'withBilling.vue.vite', config: vue.vite, env: envs.withBilling }, + { id: 'withBilling.astro.node', config: astro.node, env: envs.withBilling }, // { id: 'withBillingStaging.nuxt.node', config: nuxt.node, env: envs.withBillingStaging }, // { id: 'withBilling.nuxt.node', config: nuxt.node, env: envs.withBilling }, { diff --git a/integration/templates/astro-node/src/pages/pricing-table.astro b/integration/templates/astro-node/src/pages/pricing-table.astro new file mode 100644 index 00000000000..dc96566ea0f --- /dev/null +++ b/integration/templates/astro-node/src/pages/pricing-table.astro @@ -0,0 +1,10 @@ +--- +import { __experimental_PricingTable as Experimental_PricingTable } from "@clerk/astro/components"; +import Layout from "../layouts/Layout.astro"; +--- + + +
+ +
+ From 177bc12aba3ef0c9fddbe58be11f8de86094d437 Mon Sep 17 00:00:00 2001 From: Vaggelis Yfantis Date: Wed, 30 Apr 2025 20:08:47 +0300 Subject: [PATCH 10/19] test(e2e): Add tests for Astro --- integration/presets/astro.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/integration/presets/astro.ts b/integration/presets/astro.ts index 7995725b97b..d0c78d917ad 100644 --- a/integration/presets/astro.ts +++ b/integration/presets/astro.ts @@ -10,7 +10,7 @@ const astroNode = applicationConfig() .addScript('dev', 'pnpm dev') .addScript('build', 'pnpm build') .addScript('serve', 'pnpm preview') - .addDependency('@clerk/astro', linkPackage('astro')) + .addDependency('@clerk/astro', '*') .addDependency('@clerk/types', linkPackage('types')) .addDependency('@clerk/localizations', linkPackage('localizations')); From d103848fecaca518df50b2bba44e7294fa6f086e Mon Sep 17 00:00:00 2001 From: Vaggelis Yfantis Date: Fri, 2 May 2025 09:14:20 +0300 Subject: [PATCH 11/19] chore(repo): Add changeset --- .changeset/public-files-throw.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/public-files-throw.md diff --git a/.changeset/public-files-throw.md b/.changeset/public-files-throw.md new file mode 100644 index 00000000000..10f687147ea --- /dev/null +++ b/.changeset/public-files-throw.md @@ -0,0 +1,5 @@ +--- +'@clerk/astro': minor +--- + +Introducing `` From f5138e970c7ab998490292a5183addb13ece1e4b Mon Sep 17 00:00:00 2001 From: Vaggelis Yfantis Date: Fri, 2 May 2025 09:16:52 +0300 Subject: [PATCH 12/19] chore(astro): Rename component --- .../templates/astro-node/src/pages/pricing-table.astro | 4 ++-- .../interactive/InternalUIComponentRenderer.astro | 2 +- .../astro/src/astro-components/interactive/PricingTable.astro | 2 +- packages/astro/src/react/uiComponents.tsx | 4 ++-- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/integration/templates/astro-node/src/pages/pricing-table.astro b/integration/templates/astro-node/src/pages/pricing-table.astro index dc96566ea0f..cbafd7a24d7 100644 --- a/integration/templates/astro-node/src/pages/pricing-table.astro +++ b/integration/templates/astro-node/src/pages/pricing-table.astro @@ -1,10 +1,10 @@ --- -import { __experimental_PricingTable as Experimental_PricingTable } from "@clerk/astro/components"; +import { experimental_PricingTable } from "@clerk/astro/components"; import Layout from "../layouts/Layout.astro"; ---
- +
diff --git a/packages/astro/src/astro-components/interactive/InternalUIComponentRenderer.astro b/packages/astro/src/astro-components/interactive/InternalUIComponentRenderer.astro index 5b69e4eb914..dc257f0a95c 100644 --- a/packages/astro/src/astro-components/interactive/InternalUIComponentRenderer.astro +++ b/packages/astro/src/astro-components/interactive/InternalUIComponentRenderer.astro @@ -12,7 +12,7 @@ interface Props { | 'user-profile' | 'google-one-tap' | 'waitlist' - | '__experimental_PricingTable'; + | 'experimental_PricingTable'; } import { generateSafeId } from '@clerk/astro/internal'; diff --git a/packages/astro/src/astro-components/interactive/PricingTable.astro b/packages/astro/src/astro-components/interactive/PricingTable.astro index 18d79afbb36..d261853ebf4 100644 --- a/packages/astro/src/astro-components/interactive/PricingTable.astro +++ b/packages/astro/src/astro-components/interactive/PricingTable.astro @@ -5,4 +5,4 @@ type Props = __experimental_PricingTableProps import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro' --- - + diff --git a/packages/astro/src/react/uiComponents.tsx b/packages/astro/src/react/uiComponents.tsx index 912c38f1069..0312a0cd09c 100644 --- a/packages/astro/src/react/uiComponents.tsx +++ b/packages/astro/src/react/uiComponents.tsx @@ -187,7 +187,7 @@ export const Waitlist = withClerk(({ clerk, ...props }: WithClerkProp) => { return ( ); }, - '__experimental_PricingTable', + 'experimental_PricingTable', ); From 28eaf56e9cb35e8357dc11435e75225e697eb6f7 Mon Sep 17 00:00:00 2001 From: Vaggelis Yfantis Date: Fri, 2 May 2025 09:36:38 +0300 Subject: [PATCH 13/19] chore(astro): Update component name --- integration/presets/astro.ts | 2 +- .../templates/astro-node/src/pages/pricing-table.astro | 4 ++-- integration/tests/pricing-table.test.ts | 2 +- package.json | 2 +- packages/astro/src/astro-components/index.ts | 1 + .../interactive/InternalUIComponentRenderer.astro | 2 +- .../astro/src/astro-components/interactive/PricingTable.astro | 2 +- packages/astro/src/react/uiComponents.tsx | 4 ++-- 8 files changed, 10 insertions(+), 9 deletions(-) diff --git a/integration/presets/astro.ts b/integration/presets/astro.ts index d0c78d917ad..7995725b97b 100644 --- a/integration/presets/astro.ts +++ b/integration/presets/astro.ts @@ -10,7 +10,7 @@ const astroNode = applicationConfig() .addScript('dev', 'pnpm dev') .addScript('build', 'pnpm build') .addScript('serve', 'pnpm preview') - .addDependency('@clerk/astro', '*') + .addDependency('@clerk/astro', linkPackage('astro')) .addDependency('@clerk/types', linkPackage('types')) .addDependency('@clerk/localizations', linkPackage('localizations')); diff --git a/integration/templates/astro-node/src/pages/pricing-table.astro b/integration/templates/astro-node/src/pages/pricing-table.astro index cbafd7a24d7..64d12d87dbb 100644 --- a/integration/templates/astro-node/src/pages/pricing-table.astro +++ b/integration/templates/astro-node/src/pages/pricing-table.astro @@ -1,10 +1,10 @@ --- -import { experimental_PricingTable } from "@clerk/astro/components"; +import { Experimental_PricingTable } from "@clerk/astro/components"; import Layout from "../layouts/Layout.astro"; ---
- +
diff --git a/integration/tests/pricing-table.test.ts b/integration/tests/pricing-table.test.ts index 3d203aa37cb..e75a1729194 100644 --- a/integration/tests/pricing-table.test.ts +++ b/integration/tests/pricing-table.test.ts @@ -66,7 +66,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withBilling] })('pricing tabl await frame.getByLabel('Card number').fill('4242424242424242'); await frame.getByLabel('Expiration date').fill('1234'); await frame.getByLabel('Security code').fill('123'); - await frame.getByLabel('ZIP code').fill('12345'); + // await frame.getByLabel('ZIP code').fill('12345'); await u.po.page.getByRole('button', { name: 'Pay $' }).click(); await expect(u.po.page.getByText('Payment was successful!')).toBeVisible(); diff --git a/package.json b/package.json index 0a459374786..abdc1a899ef 100644 --- a/package.json +++ b/package.json @@ -32,7 +32,7 @@ "test:integration:ap-flows": "pnpm test:integration:base --grep @ap-flows", "test:integration:astro": "E2E_APP_ID=astro.* pnpm test:integration:base --grep @astro", "test:integration:base": "pnpm playwright test --config integration/playwright.config.ts", - "test:integration:billing": "E2E_APP_ID=withBilling.* pnpm test:integration:base --grep @billing", + "test:integration:billing": "E2E_APP_ID=withBilling.astro.node pnpm test:integration:base --grep @billing", "test:integration:cleanup": "pnpm playwright test --config integration/playwright.cleanup.config.ts", "test:integration:deployment:nextjs": "pnpm playwright test --config integration/playwright.deployments.config.ts", "test:integration:elements": "E2E_APP_ID=elements.* pnpm test:integration:base --grep @elements", diff --git a/packages/astro/src/astro-components/index.ts b/packages/astro/src/astro-components/index.ts index 67be6d14e38..aff1b57489a 100644 --- a/packages/astro/src/astro-components/index.ts +++ b/packages/astro/src/astro-components/index.ts @@ -25,3 +25,4 @@ export { OrganizationSwitcher } from './interactive/OrganizationSwitcher'; export { default as OrganizationList } from './interactive/OrganizationList.astro'; export { default as GoogleOneTap } from './interactive/GoogleOneTap.astro'; export { default as Waitlist } from './interactive/Waitlist.astro'; +export { default as Experimental_PricingTable } from './interactive/PricingTable.astro'; diff --git a/packages/astro/src/astro-components/interactive/InternalUIComponentRenderer.astro b/packages/astro/src/astro-components/interactive/InternalUIComponentRenderer.astro index dc257f0a95c..5b69e4eb914 100644 --- a/packages/astro/src/astro-components/interactive/InternalUIComponentRenderer.astro +++ b/packages/astro/src/astro-components/interactive/InternalUIComponentRenderer.astro @@ -12,7 +12,7 @@ interface Props { | 'user-profile' | 'google-one-tap' | 'waitlist' - | 'experimental_PricingTable'; + | '__experimental_PricingTable'; } import { generateSafeId } from '@clerk/astro/internal'; diff --git a/packages/astro/src/astro-components/interactive/PricingTable.astro b/packages/astro/src/astro-components/interactive/PricingTable.astro index d261853ebf4..18d79afbb36 100644 --- a/packages/astro/src/astro-components/interactive/PricingTable.astro +++ b/packages/astro/src/astro-components/interactive/PricingTable.astro @@ -5,4 +5,4 @@ type Props = __experimental_PricingTableProps import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro' --- - + diff --git a/packages/astro/src/react/uiComponents.tsx b/packages/astro/src/react/uiComponents.tsx index 0312a0cd09c..b6388fe5b10 100644 --- a/packages/astro/src/react/uiComponents.tsx +++ b/packages/astro/src/react/uiComponents.tsx @@ -187,7 +187,7 @@ export const Waitlist = withClerk(({ clerk, ...props }: WithClerkProp) => { return ( ); }, - 'experimental_PricingTable', + 'Experimental_PricingTable', ); From 7e1bdad9506c95099f11050467494bce8640af7c Mon Sep 17 00:00:00 2001 From: Vaggelis Yfantis Date: Fri, 2 May 2025 13:37:24 +0300 Subject: [PATCH 14/19] chore(e2e): Uncomment zipcode filling --- integration/tests/pricing-table.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/integration/tests/pricing-table.test.ts b/integration/tests/pricing-table.test.ts index e75a1729194..3d203aa37cb 100644 --- a/integration/tests/pricing-table.test.ts +++ b/integration/tests/pricing-table.test.ts @@ -66,7 +66,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withBilling] })('pricing tabl await frame.getByLabel('Card number').fill('4242424242424242'); await frame.getByLabel('Expiration date').fill('1234'); await frame.getByLabel('Security code').fill('123'); - // await frame.getByLabel('ZIP code').fill('12345'); + await frame.getByLabel('ZIP code').fill('12345'); await u.po.page.getByRole('button', { name: 'Pay $' }).click(); await expect(u.po.page.getByText('Payment was successful!')).toBeVisible(); From 6b841fdeaa33b835273109ebe51047e27507a6ca Mon Sep 17 00:00:00 2001 From: Vaggelis Yfantis Date: Fri, 2 May 2025 14:30:35 +0300 Subject: [PATCH 15/19] chore(astro): Add component to mountAllClerkAstroJSComponents --- packages/astro/src/internal/mount-clerk-astro-js-components.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/astro/src/internal/mount-clerk-astro-js-components.ts b/packages/astro/src/internal/mount-clerk-astro-js-components.ts index 19786c45040..9a4e070e31d 100644 --- a/packages/astro/src/internal/mount-clerk-astro-js-components.ts +++ b/packages/astro/src/internal/mount-clerk-astro-js-components.ts @@ -14,6 +14,7 @@ const mountAllClerkAstroJSComponents = () => { 'sign-up': 'mountSignUp', 'google-one-tap': 'openGoogleOneTap', waitlist: 'mountWaitlist', + __experimental_PricingTable: '__experimental_mountPricingTable', } as const; Object.entries(mountFns).forEach(([category, mountFn]) => { From 6278f2183726fe8f8d2bedc5c05925a9d43cbd33 Mon Sep 17 00:00:00 2001 From: Vaggelis Yfantis Date: Fri, 2 May 2025 17:35:48 +0300 Subject: [PATCH 16/19] chore(repo): Change billing test e2e command --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index abdc1a899ef..0a459374786 100644 --- a/package.json +++ b/package.json @@ -32,7 +32,7 @@ "test:integration:ap-flows": "pnpm test:integration:base --grep @ap-flows", "test:integration:astro": "E2E_APP_ID=astro.* pnpm test:integration:base --grep @astro", "test:integration:base": "pnpm playwright test --config integration/playwright.config.ts", - "test:integration:billing": "E2E_APP_ID=withBilling.astro.node pnpm test:integration:base --grep @billing", + "test:integration:billing": "E2E_APP_ID=withBilling.* pnpm test:integration:base --grep @billing", "test:integration:cleanup": "pnpm playwright test --config integration/playwright.cleanup.config.ts", "test:integration:deployment:nextjs": "pnpm playwright test --config integration/playwright.deployments.config.ts", "test:integration:elements": "E2E_APP_ID=elements.* pnpm test:integration:base --grep @elements", From 976ddbe77a1ea0b06f0bf6006e73a0901a221ab2 Mon Sep 17 00:00:00 2001 From: Vaggelis Yfantis Date: Mon, 5 May 2025 12:57:40 +0300 Subject: [PATCH 17/19] Update .changeset/public-files-throw.md Co-authored-by: Lennart --- .changeset/public-files-throw.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/public-files-throw.md b/.changeset/public-files-throw.md index 10f687147ea..befa76eb33a 100644 --- a/.changeset/public-files-throw.md +++ b/.changeset/public-files-throw.md @@ -2,4 +2,4 @@ '@clerk/astro': minor --- -Introducing `` +Add `` component to the SDK. Learn more about it in the [Clerk Billing guide](https://clerk.com/docs/billing/overview) From 92c96e6f962b4439fcd4e5f54e0521f8e0dd475b Mon Sep 17 00:00:00 2001 From: LekoArts Date: Tue, 6 May 2025 09:28:32 +0900 Subject: [PATCH 18/19] remove __experimental --- .changeset/public-files-throw.md | 2 +- .../astro-node/src/pages/pricing-table.astro | 4 ++-- packages/astro/src/astro-components/index.ts | 2 +- .../InternalUIComponentRenderer.astro | 2 +- .../interactive/PricingTable.astro | 6 ++--- .../mount-clerk-astro-js-components.ts | 2 +- packages/astro/src/react/uiComponents.tsx | 23 ++++++++----------- 7 files changed, 19 insertions(+), 22 deletions(-) diff --git a/.changeset/public-files-throw.md b/.changeset/public-files-throw.md index befa76eb33a..346097e247d 100644 --- a/.changeset/public-files-throw.md +++ b/.changeset/public-files-throw.md @@ -2,4 +2,4 @@ '@clerk/astro': minor --- -Add `` component to the SDK. Learn more about it in the [Clerk Billing guide](https://clerk.com/docs/billing/overview) +Add `` component to the SDK. Learn more about it in the [Clerk Billing guide](https://clerk.com/docs/billing/overview). diff --git a/integration/templates/astro-node/src/pages/pricing-table.astro b/integration/templates/astro-node/src/pages/pricing-table.astro index 64d12d87dbb..868d3c57008 100644 --- a/integration/templates/astro-node/src/pages/pricing-table.astro +++ b/integration/templates/astro-node/src/pages/pricing-table.astro @@ -1,10 +1,10 @@ --- -import { Experimental_PricingTable } from "@clerk/astro/components"; +import { PricingTable } from "@clerk/astro/components"; import Layout from "../layouts/Layout.astro"; ---
- +
diff --git a/packages/astro/src/astro-components/index.ts b/packages/astro/src/astro-components/index.ts index aff1b57489a..1fc085e0f70 100644 --- a/packages/astro/src/astro-components/index.ts +++ b/packages/astro/src/astro-components/index.ts @@ -25,4 +25,4 @@ export { OrganizationSwitcher } from './interactive/OrganizationSwitcher'; export { default as OrganizationList } from './interactive/OrganizationList.astro'; export { default as GoogleOneTap } from './interactive/GoogleOneTap.astro'; export { default as Waitlist } from './interactive/Waitlist.astro'; -export { default as Experimental_PricingTable } from './interactive/PricingTable.astro'; +export { default as PricingTable } from './interactive/PricingTable.astro'; diff --git a/packages/astro/src/astro-components/interactive/InternalUIComponentRenderer.astro b/packages/astro/src/astro-components/interactive/InternalUIComponentRenderer.astro index 5b69e4eb914..2513f867b8d 100644 --- a/packages/astro/src/astro-components/interactive/InternalUIComponentRenderer.astro +++ b/packages/astro/src/astro-components/interactive/InternalUIComponentRenderer.astro @@ -12,7 +12,7 @@ interface Props { | 'user-profile' | 'google-one-tap' | 'waitlist' - | '__experimental_PricingTable'; + | 'PricingTable'; } import { generateSafeId } from '@clerk/astro/internal'; diff --git a/packages/astro/src/astro-components/interactive/PricingTable.astro b/packages/astro/src/astro-components/interactive/PricingTable.astro index 18d79afbb36..3df4b4599e0 100644 --- a/packages/astro/src/astro-components/interactive/PricingTable.astro +++ b/packages/astro/src/astro-components/interactive/PricingTable.astro @@ -1,8 +1,8 @@ --- -import type { __experimental_PricingTableProps } from "@clerk/types"; -type Props = __experimental_PricingTableProps +import type { PricingTableProps } from "@clerk/types"; +type Props = PricingTableProps import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro' --- - + diff --git a/packages/astro/src/internal/mount-clerk-astro-js-components.ts b/packages/astro/src/internal/mount-clerk-astro-js-components.ts index 9a4e070e31d..63cd02f3ddf 100644 --- a/packages/astro/src/internal/mount-clerk-astro-js-components.ts +++ b/packages/astro/src/internal/mount-clerk-astro-js-components.ts @@ -14,7 +14,7 @@ const mountAllClerkAstroJSComponents = () => { 'sign-up': 'mountSignUp', 'google-one-tap': 'openGoogleOneTap', waitlist: 'mountWaitlist', - __experimental_PricingTable: '__experimental_mountPricingTable', + PricingTable: 'mountPricingTable', } as const; Object.entries(mountFns).forEach(([category, mountFn]) => { diff --git a/packages/astro/src/react/uiComponents.tsx b/packages/astro/src/react/uiComponents.tsx index b6388fe5b10..5f66796503f 100644 --- a/packages/astro/src/react/uiComponents.tsx +++ b/packages/astro/src/react/uiComponents.tsx @@ -1,9 +1,9 @@ import type { - __experimental_PricingTableProps, GoogleOneTapProps, OrganizationListProps, OrganizationProfileProps, OrganizationSwitcherProps, + PricingTableProps, SignInProps, SignUpProps, UserButtonProps, @@ -187,15 +187,12 @@ export const Waitlist = withClerk(({ clerk, ...props }: WithClerkProp) => { - return ( - - ); - }, - 'Experimental_PricingTable', -); +export const Experimental_PricingTable = withClerk(({ clerk, ...props }: WithClerkProp) => { + return ( + + ); +}, 'PricingTable'); From 33160e4fbdc9af580f641b844c94c50837769b7b Mon Sep 17 00:00:00 2001 From: LekoArts Date: Tue, 6 May 2025 09:34:41 +0900 Subject: [PATCH 19/19] fixes --- integration/templates/astro-node/src/pages/pricing-table.astro | 2 +- .../interactive/InternalUIComponentRenderer.astro | 2 +- .../astro/src/astro-components/interactive/PricingTable.astro | 2 +- packages/astro/src/internal/mount-clerk-astro-js-components.ts | 2 +- packages/astro/src/react/uiComponents.tsx | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/integration/templates/astro-node/src/pages/pricing-table.astro b/integration/templates/astro-node/src/pages/pricing-table.astro index 868d3c57008..8fac1771897 100644 --- a/integration/templates/astro-node/src/pages/pricing-table.astro +++ b/integration/templates/astro-node/src/pages/pricing-table.astro @@ -3,7 +3,7 @@ import { PricingTable } from "@clerk/astro/components"; import Layout from "../layouts/Layout.astro"; --- - +
diff --git a/packages/astro/src/astro-components/interactive/InternalUIComponentRenderer.astro b/packages/astro/src/astro-components/interactive/InternalUIComponentRenderer.astro index 2513f867b8d..ebb01fb09b7 100644 --- a/packages/astro/src/astro-components/interactive/InternalUIComponentRenderer.astro +++ b/packages/astro/src/astro-components/interactive/InternalUIComponentRenderer.astro @@ -12,7 +12,7 @@ interface Props { | 'user-profile' | 'google-one-tap' | 'waitlist' - | 'PricingTable'; + | 'pricing-table'; } import { generateSafeId } from '@clerk/astro/internal'; diff --git a/packages/astro/src/astro-components/interactive/PricingTable.astro b/packages/astro/src/astro-components/interactive/PricingTable.astro index 3df4b4599e0..ddb4b7ecdcb 100644 --- a/packages/astro/src/astro-components/interactive/PricingTable.astro +++ b/packages/astro/src/astro-components/interactive/PricingTable.astro @@ -5,4 +5,4 @@ type Props = PricingTableProps import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro' --- - + diff --git a/packages/astro/src/internal/mount-clerk-astro-js-components.ts b/packages/astro/src/internal/mount-clerk-astro-js-components.ts index 63cd02f3ddf..117551ad594 100644 --- a/packages/astro/src/internal/mount-clerk-astro-js-components.ts +++ b/packages/astro/src/internal/mount-clerk-astro-js-components.ts @@ -14,7 +14,7 @@ const mountAllClerkAstroJSComponents = () => { 'sign-up': 'mountSignUp', 'google-one-tap': 'openGoogleOneTap', waitlist: 'mountWaitlist', - PricingTable: 'mountPricingTable', + 'pricing-table': 'mountPricingTable', } as const; Object.entries(mountFns).forEach(([category, mountFn]) => { diff --git a/packages/astro/src/react/uiComponents.tsx b/packages/astro/src/react/uiComponents.tsx index 5f66796503f..731081dbc95 100644 --- a/packages/astro/src/react/uiComponents.tsx +++ b/packages/astro/src/react/uiComponents.tsx @@ -187,7 +187,7 @@ export const Waitlist = withClerk(({ clerk, ...props }: WithClerkProp) => { +export const PricingTable = withClerk(({ clerk, ...props }: WithClerkProp) => { return (