chore: customizes expires on date

Author: wobsoriano

packages/clerk-js/src/ui/components/ApiKeys/CreateApiKeyForm.tsx

@@ -150,19 +150,19 @@ export const CreateApiKeyForm: React.FC<CreateApiKeyFormProps> = ({ onCreate, is
     }
 
     const expirationDate = new Date(Date.now() + timeLeftInSeconds * 1000);
-    return (
-      t(localizationKeys('apiKeys.formFieldCaption__expiration__expiresOn')) +
-      ' ' +
-      expirationDate.toLocaleString(undefined, {
-        year: 'numeric',
-        month: 'long',
-        day: '2-digit',
-        hour: 'numeric',
-        minute: '2-digit',
-        second: '2-digit',
-        hour12: true,
-        timeZoneName: 'short',
-      })
+    return t(
+      localizationKeys('apiKeys.formFieldCaption__expiration__expiresOn', {
+        date: expirationDate.toLocaleString(undefined, {
+          year: 'numeric',
+          month: 'long',
+          day: '2-digit',
+          hour: 'numeric',
+          minute: '2-digit',
+          second: '2-digit',
+          hour12: true,
+          timeZoneName: 'short',
+        }),
+      }),
     );
   }, [selectedExpiration?.value]);
 

packages/localizations/src/en-US.ts

@@ -34,7 +34,7 @@ export const enUS: LocalizationResource = {
     createdAndExpirationStatus__expiresOn:
       "Created {{ createdDate | shortDate('en-US') }} • Expires {{ expiresDate | longDate('en-US') }}",
     formFieldCaption__expiration__never: 'This key will never expire',
-    formFieldCaption__expiration__expiresOn: 'Expiring',
+    formFieldCaption__expiration__expiresOn: 'Expiring {{ date }}',
   },
   backButton: 'Back',
   badge__activePlan: 'Active',

packages/types/src/localization.ts

@@ -1183,7 +1183,7 @@ export type __internal_LocalizationResource = {
     createdAndExpirationStatus__never: LocalizationValue<'createdDate'>;
     createdAndExpirationStatus__expiresOn: LocalizationValue<'createdDate' | 'expiresDate'>;
     formFieldCaption__expiration__never: LocalizationValue;
-    formFieldCaption__expiration__expiresOn: LocalizationValue;
+    formFieldCaption__expiration__expiresOn: LocalizationValue<'date'>;
   };
 };