From 61f08de096f3fbfe39d873d04d614eb2f5bf46dc Mon Sep 17 00:00:00 2001
From: Alex Carpenter <alex.carpenter@clerk.dev>
Date: Wed, 16 Apr 2025 19:03:18 -0400
Subject: [PATCH 1/5] refactor(clerk-js): Invoice page title

---
 .../ui/components/Invoices/InvoicePage.tsx    | 67 ++++++++++++++++---
 1 file changed, 59 insertions(+), 8 deletions(-)

diff --git a/packages/clerk-js/src/ui/components/Invoices/InvoicePage.tsx b/packages/clerk-js/src/ui/components/Invoices/InvoicePage.tsx
index fcd9f09343e..43c764a6a1d 100644
--- a/packages/clerk-js/src/ui/components/Invoices/InvoicePage.tsx
+++ b/packages/clerk-js/src/ui/components/Invoices/InvoicePage.tsx
@@ -1,6 +1,8 @@
 import { useInvoicesContext } from '../../contexts';
-import { Badge, Box, Dd, descriptors, Dl, Dt, Heading, Spinner, Text } from '../../customizables';
+import { Badge, Box, Button, Dd, descriptors, Dl, Dt, Heading, Icon, Span, Spinner, Text } from '../../customizables';
 import { Header, LineItems } from '../../elements';
+import { useClipboard } from '../../hooks';
+import { Check, Copy } from '../../icons';
 import { useRouter } from '../../router';
 import { common } from '../../styledSystem';
 import { colors } from '../../utils';
@@ -79,15 +81,34 @@ export const InvoicePage = () => {
                 sx={{
                   display: 'flex',
                   justifyContent: 'space-between',
-                  alignItems: 'center',
+                  alignItems: 'start',
                 }}
               >
-                <Heading
-                  textVariant='h2'
-                  elementDescriptor={descriptors.invoiceTitle}
-                >
-                  {truncateWithEndVisible(invoice.id)}
-                </Heading>
+                <Span>
+                  <Heading
+                    textVariant='h2'
+                    elementDescriptor={descriptors.invoiceTitle}
+                  >
+                    Invoice ID
+                  </Heading>
+                  <Span
+                    sx={t => ({
+                      display: 'flex',
+                      alignItems: 'center',
+                      gap: t.space.$0x5,
+                      color: t.colors.$colorTextSecondary,
+                    })}
+                  >
+                    <CopyButton text={invoice.id} />
+                    <Text
+                      colorScheme='secondary'
+                      variant='subtitle'
+                    >
+                      {truncateWithEndVisible(invoice.id)}
+                    </Text>
+                  </Span>
+                </Span>
+
                 <Badge
                   elementDescriptor={descriptors.invoiceBadge}
                   colorScheme={
@@ -183,3 +204,33 @@ export const InvoicePage = () => {
     </>
   );
 };
+
+function CopyButton({ text, copyLabel = 'Copy' }: { text: string; copyLabel?: string }) {
+  const { onCopy, hasCopied } = useClipboard(text);
+
+  return (
+    <Button
+      variant='unstyled'
+      onClick={onCopy}
+      sx={t => ({
+        color: 'inherit',
+        width: t.sizes.$4,
+        height: t.sizes.$4,
+        padding: 0,
+        borderRadius: t.radii.$sm,
+        '&:focus-visible': {
+          outline: '2px solid',
+          outlineColor: t.colors.$neutralAlpha200,
+        },
+      })}
+      focusRing={false}
+      aria-label={hasCopied ? 'Copied' : copyLabel}
+    >
+      <Icon
+        size='sm'
+        icon={hasCopied ? Check : Copy}
+        aria-hidden
+      />
+    </Button>
+  );
+}

From de1cce44791bc1b5fc181b05e6b61b891dcfa721 Mon Sep 17 00:00:00 2001
From: Alex Carpenter <alex.carpenter@clerk.dev>
Date: Wed, 16 Apr 2025 19:17:09 -0400
Subject: [PATCH 2/5] descriptors

---
 .../ui/components/Invoices/InvoicePage.tsx    | 28 +++++++++++++++----
 .../ui/customizables/elementDescriptors.ts    |  6 ++++
 packages/types/src/appearance.ts              |  6 ++++
 3 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/packages/clerk-js/src/ui/components/Invoices/InvoicePage.tsx b/packages/clerk-js/src/ui/components/Invoices/InvoicePage.tsx
index 43c764a6a1d..281073b5b6f 100644
--- a/packages/clerk-js/src/ui/components/Invoices/InvoicePage.tsx
+++ b/packages/clerk-js/src/ui/components/Invoices/InvoicePage.tsx
@@ -78,13 +78,14 @@ export const InvoicePage = () => {
               })}
             >
               <Box
+                elementDescriptor={descriptors.invoiceHeaderContent}
                 sx={{
                   display: 'flex',
                   justifyContent: 'space-between',
                   alignItems: 'start',
                 }}
               >
-                <Span>
+                <Span elementDescriptor={descriptors.invoiceTitleContainer}>
                   <Heading
                     textVariant='h2'
                     elementDescriptor={descriptors.invoiceTitle}
@@ -92,17 +93,22 @@ export const InvoicePage = () => {
                     Invoice ID
                   </Heading>
                   <Span
+                    elementDescriptor={descriptors.invoiceIdContainer}
                     sx={t => ({
                       display: 'flex',
                       alignItems: 'center',
-                      gap: t.space.$0x5,
+                      gap: t.space.$0x25,
                       color: t.colors.$colorTextSecondary,
                     })}
                   >
-                    <CopyButton text={invoice.id} />
+                    <CopyButton
+                      copyLabel='Copy invoice ID'
+                      text={invoice.id}
+                    />
                     <Text
                       colorScheme='secondary'
                       variant='subtitle'
+                      elementDescriptor={descriptors.invoiceId}
                     >
                       {truncateWithEndVisible(invoice.id)}
                     </Text>
@@ -130,6 +136,7 @@ export const InvoicePage = () => {
                 <Box elementDescriptor={descriptors.invoiceDetailsItem}>
                   <Dt elementDescriptor={descriptors.invoiceDetailsItemTitle}>
                     <Text
+                      elementDescriptor={descriptors.invoiceDetailsItemTitleText}
                       colorScheme='secondary'
                       variant='body'
                     >
@@ -137,7 +144,12 @@ export const InvoicePage = () => {
                     </Text>
                   </Dt>
                   <Dd elementDescriptor={descriptors.invoiceDetailsItemValue}>
-                    <Text variant='subtitle'>{new Date(invoice.paymentDueOn).toLocaleDateString()}</Text>
+                    <Text
+                      elementDescriptor={descriptors.invoiceDetailsItemValueText}
+                      variant='subtitle'
+                    >
+                      {new Date(invoice.paymentDueOn).toLocaleDateString()}
+                    </Text>
                   </Dd>
                 </Box>
                 <Box
@@ -148,6 +160,7 @@ export const InvoicePage = () => {
                 >
                   <Dt elementDescriptor={descriptors.invoiceDetailsItemTitle}>
                     <Text
+                      elementDescriptor={descriptors.invoiceDetailsItemTitleText}
                       colorScheme='secondary'
                       variant='body'
                     >
@@ -155,7 +168,12 @@ export const InvoicePage = () => {
                     </Text>
                   </Dt>
                   <Dd elementDescriptor={descriptors.invoiceDetailsItemValue}>
-                    <Text variant='subtitle'>{new Date(invoice.paymentDueOn).toLocaleDateString()}</Text>
+                    <Text
+                      elementDescriptor={descriptors.invoiceDetailsItemValueText}
+                      variant='subtitle'
+                    >
+                      {new Date(invoice.paymentDueOn).toLocaleDateString()}
+                    </Text>
                   </Dd>
                 </Box>
               </Dl>
diff --git a/packages/clerk-js/src/ui/customizables/elementDescriptors.ts b/packages/clerk-js/src/ui/customizables/elementDescriptors.ts
index f91058baef1..9d5679b94d0 100644
--- a/packages/clerk-js/src/ui/customizables/elementDescriptors.ts
+++ b/packages/clerk-js/src/ui/customizables/elementDescriptors.ts
@@ -343,12 +343,18 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
   'invoiceRoot',
   'invoiceCard',
   'invoiceHeader',
+  'invoiceHeaderContent',
   'invoiceTitle',
+  'invoiceTitleContainer',
+  'invoiceId',
+  'invoiceIdContainer',
   'invoiceBadge',
   'invoiceDetails',
   'invoiceDetailsItem',
   'invoiceDetailsItemTitle',
+  'invoiceDetailsItemTitleText',
   'invoiceDetailsItemValue',
+  'invoiceDetailsItemValueText',
   'invoiceContent',
 
   'menuButton',
diff --git a/packages/types/src/appearance.ts b/packages/types/src/appearance.ts
index 03903d1ca4d..cb2dd4f6324 100644
--- a/packages/types/src/appearance.ts
+++ b/packages/types/src/appearance.ts
@@ -467,12 +467,18 @@ export type ElementsConfig = {
   invoiceRoot: WithOptions;
   invoiceCard: WithOptions;
   invoiceHeader: WithOptions;
+  invoiceHeaderContent: WithOptions;
   invoiceTitle: WithOptions;
+  invoiceTitleContainer: WithOptions;
+  invoiceId: WithOptions;
+  invoiceIdContainer: WithOptions;
   invoiceBadge: WithOptions;
   invoiceDetails: WithOptions;
   invoiceDetailsItem: WithOptions;
   invoiceDetailsItemTitle: WithOptions;
+  invoiceDetailsItemTitleText: WithOptions;
   invoiceDetailsItemValue: WithOptions;
+  invoiceDetailsItemValueText: WithOptions;
   invoiceContent: WithOptions;
 
   menuButton: WithOptions<MenuId>;

From 3629296872694f21e9c7fbba1741649e0ee46e0c Mon Sep 17 00:00:00 2001
From: Alex Carpenter <alex.carpenter@clerk.dev>
Date: Wed, 16 Apr 2025 19:18:18 -0400
Subject: [PATCH 3/5] add changeset

---
 .changeset/forty-peaches-stay.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/forty-peaches-stay.md

diff --git a/.changeset/forty-peaches-stay.md b/.changeset/forty-peaches-stay.md
new file mode 100644
index 00000000000..de77f82d107
--- /dev/null
+++ b/.changeset/forty-peaches-stay.md
@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+Refactor InvoicePage title and invoice ID UI.

From ea1927ce788ea74fdfa5843b187a54acec644dbe Mon Sep 17 00:00:00 2001
From: Alex Carpenter <alex.carpenter@clerk.dev>
Date: Thu, 17 Apr 2025 09:33:00 -0400
Subject: [PATCH 4/5] improve descriptors

---
 .../clerk-js/src/ui/components/Invoices/InvoicePage.tsx    | 7 ++++---
 .../clerk-js/src/ui/customizables/elementDescriptors.ts    | 4 +++-
 packages/types/src/appearance.ts                           | 4 +++-
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/packages/clerk-js/src/ui/components/Invoices/InvoicePage.tsx b/packages/clerk-js/src/ui/components/Invoices/InvoicePage.tsx
index 281073b5b6f..dc2e965cb30 100644
--- a/packages/clerk-js/src/ui/components/Invoices/InvoicePage.tsx
+++ b/packages/clerk-js/src/ui/components/Invoices/InvoicePage.tsx
@@ -78,14 +78,14 @@ export const InvoicePage = () => {
               })}
             >
               <Box
-                elementDescriptor={descriptors.invoiceHeaderContent}
+                elementDescriptor={descriptors.invoiceHeaderTitleBadgeContainer}
                 sx={{
                   display: 'flex',
                   justifyContent: 'space-between',
                   alignItems: 'start',
                 }}
               >
-                <Span elementDescriptor={descriptors.invoiceTitleContainer}>
+                <Span elementDescriptor={descriptors.invoiceTitleIdContainer}>
                   <Heading
                     textVariant='h2'
                     elementDescriptor={descriptors.invoiceTitle}
@@ -106,9 +106,9 @@ export const InvoicePage = () => {
                       text={invoice.id}
                     />
                     <Text
+                      elementDescriptor={descriptors.invoiceId}
                       colorScheme='secondary'
                       variant='subtitle'
-                      elementDescriptor={descriptors.invoiceId}
                     >
                       {truncateWithEndVisible(invoice.id)}
                     </Text>
@@ -228,6 +228,7 @@ function CopyButton({ text, copyLabel = 'Copy' }: { text: string; copyLabel?: st
 
   return (
     <Button
+      elementDescriptor={descriptors.invoiceCopyButton}
       variant='unstyled'
       onClick={onCopy}
       sx={t => ({
diff --git a/packages/clerk-js/src/ui/customizables/elementDescriptors.ts b/packages/clerk-js/src/ui/customizables/elementDescriptors.ts
index 9d5679b94d0..0c37ad62c20 100644
--- a/packages/clerk-js/src/ui/customizables/elementDescriptors.ts
+++ b/packages/clerk-js/src/ui/customizables/elementDescriptors.ts
@@ -345,9 +345,10 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
   'invoiceHeader',
   'invoiceHeaderContent',
   'invoiceTitle',
-  'invoiceTitleContainer',
+  'invoiceHeaderTitleBadgeContainer',
   'invoiceId',
   'invoiceIdContainer',
+  'invoiceTitleIdContainer',
   'invoiceBadge',
   'invoiceDetails',
   'invoiceDetailsItem',
@@ -355,6 +356,7 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
   'invoiceDetailsItemTitleText',
   'invoiceDetailsItemValue',
   'invoiceDetailsItemValueText',
+  'invoiceCopyButton',
   'invoiceContent',
 
   'menuButton',
diff --git a/packages/types/src/appearance.ts b/packages/types/src/appearance.ts
index cb2dd4f6324..d758ed78214 100644
--- a/packages/types/src/appearance.ts
+++ b/packages/types/src/appearance.ts
@@ -469,7 +469,8 @@ export type ElementsConfig = {
   invoiceHeader: WithOptions;
   invoiceHeaderContent: WithOptions;
   invoiceTitle: WithOptions;
-  invoiceTitleContainer: WithOptions;
+  invoiceHeaderTitleBadgeContainer: WithOptions;
+  invoiceTitleIdContainer: WithOptions;
   invoiceId: WithOptions;
   invoiceIdContainer: WithOptions;
   invoiceBadge: WithOptions;
@@ -479,6 +480,7 @@ export type ElementsConfig = {
   invoiceDetailsItemTitleText: WithOptions;
   invoiceDetailsItemValue: WithOptions;
   invoiceDetailsItemValueText: WithOptions;
+  invoiceCopyButton: WithOptions;
   invoiceContent: WithOptions;
 
   menuButton: WithOptions<MenuId>;

From 184c32adf6901282b2b6ba34697ae792374d07cd Mon Sep 17 00:00:00 2001
From: Alex Carpenter <alex.carpenter@clerk.dev>
Date: Thu, 17 Apr 2025 09:40:54 -0400
Subject: [PATCH 5/5] Update bundlewatch.config.json

---
 packages/clerk-js/bundlewatch.config.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/clerk-js/bundlewatch.config.json b/packages/clerk-js/bundlewatch.config.json
index 668550577df..feba2de381c 100644
--- a/packages/clerk-js/bundlewatch.config.json
+++ b/packages/clerk-js/bundlewatch.config.json
@@ -1,6 +1,6 @@
 {
   "files": [
-    { "path": "./dist/clerk.js", "maxSize": "592.5kB" },
+    { "path": "./dist/clerk.js", "maxSize": "593kB" },
     { "path": "./dist/clerk.browser.js", "maxSize": "74KB" },
     { "path": "./dist/clerk.headless*.js", "maxSize": "55KB" },
     { "path": "./dist/ui-common*.js", "maxSize": "100KB" },