Update v6 jsx namespace with the available list of web components (#786)

* update jsx namespace with the available list of web components

* update interface extensions

* chore: add changeset

* dry up sdk web components

* update bcdc and paypal messsages ref property

* remove usage of react.ref and import ref directly

Author: EvanReinstein

.changeset/smart-carrots-love.md

@@ -0,0 +1,5 @@
+---
+"@paypal/react-paypal-js": patch
+---
+
+Update v6 jsx namespace.

packages/react-paypal-js/src/v6/index.ts

@@ -1,10 +1,14 @@
-import type {
-    IntrinsicButtonProps,
-    IntrinsicPayLaterButtonProps,
-} from "./types/sdkWebComponents";
+import type { SDKWebComponents } from "./types/sdkWebComponents";
 
 export * from "./types";
-export type { ButtonProps } from "./types/sdkWebComponents";
+export type {
+    ButtonProps,
+    InternalButtonProps,
+    PayLaterButtonProps,
+    PayPalBasicCardButtonProps,
+    PayPalCreditButtonProps,
+    PayPalMessagesElement,
+} from "./types/sdkWebComponents";
 export {
     PayPalCardFieldsProvider,
     type CardFieldsSessionType,
@@ -37,22 +41,14 @@ export { usePayPalCreditSavePaymentSession } from "./hooks/usePayPalCreditSavePa
 declare global {
     // eslint-disable-next-line @typescript-eslint/no-namespace
     namespace JSX {
-        interface IntrinsicElements {
-            "paypal-button": IntrinsicButtonProps;
-            "venmo-button": IntrinsicButtonProps;
-            "paypal-pay-later-button": IntrinsicPayLaterButtonProps;
-        }
+        interface IntrinsicElements extends SDKWebComponents {}
     }
 }
 
 // React 17/18 JSX SDK Web Components type declaration (for backwards compatibility)
 declare module "react" {
     // eslint-disable-next-line @typescript-eslint/no-namespace
     namespace JSX {
-        interface IntrinsicElements {
-            "paypal-button": IntrinsicButtonProps;
-            "venmo-button": IntrinsicButtonProps;
-            "paypal-pay-later-button": IntrinsicPayLaterButtonProps;
-        }
+        interface IntrinsicElements extends SDKWebComponents {}
     }
 }

packages/react-paypal-js/src/v6/types/sdkWebComponents.ts

@@ -1,21 +1,83 @@
-import type { HTMLAttributes } from "react";
+import type { HTMLAttributes, Ref } from "react";
 
-export interface ButtonProps {
+export interface InternalButtonProps {
     type?: "buynow" | "checkout" | "donate" | "pay" | "subscribe";
     disabled?: boolean;
 }
 
-export interface IntrinsicButtonProps
+export interface ButtonProps
     extends HTMLAttributes<HTMLButtonElement>,
-        ButtonProps {}
+        InternalButtonProps {}
 
 /**
  * Internal interface for the PayLater web component.
  * Includes countryCode and productCode which are populated internally by the React component.
  */
-export interface IntrinsicPayLaterButtonProps
-    extends HTMLAttributes<HTMLButtonElement> {
+export interface PayLaterButtonProps extends HTMLAttributes<HTMLButtonElement> {
     countryCode?: string;
     productCode?: string;
     disabled?: boolean;
 }
+
+export interface PayPalBasicCardButtonProps
+    extends HTMLAttributes<HTMLButtonElement> {
+    buyerCountry: string;
+    ref?: Ref<HTMLElement>;
+}
+
+export interface PayPalCreditButtonProps
+    extends HTMLAttributes<HTMLButtonElement> {
+    countryCode?: string;
+}
+
+export interface PayPalMessagesElement extends HTMLAttributes<HTMLElement> {
+    amount?: string;
+    "auto-bootstrap"?: boolean;
+    "buyer-country"?: string;
+    "currency-code"?: string;
+    "logo-position"?: "INLINE" | "LEFT" | "RIGHT" | "TOP";
+    "logo-type"?: "MONOGRAM" | "WORDMARK";
+    "offer-types"?: string;
+    "presentation-mode"?: "AUTO" | "MODAL" | "POPUP" | "REDIRECT";
+    ref?: Ref<PayPalMessagesElement>;
+    "text-color"?: "BLACK" | "MONOCHROME" | "WHITE";
+
+    // Event handlers for custom events
+    onPaypalMessageClick?: (
+        event: CustomEvent<{
+            config: {
+                amount?: string;
+                buyerCountry?: string;
+                clickUrl?: string;
+                offerType?: string;
+            };
+        }>,
+    ) => void;
+
+    onPaypalMessageAttributeChange?: (
+        event: CustomEvent<{
+            changedProperties: string[];
+            config: {
+                amount?: string;
+                buyerCountry?: string;
+                currencyCode?: string;
+                logoPosition?: string;
+                logoType?: string;
+                offerTypes?: string;
+                textColor?: string;
+            };
+        }>,
+    ) => void;
+
+    setContent?: (content: Record<string, unknown>) => void;
+}
+
+export type SDKWebComponents = {
+    "paypal-button": ButtonProps;
+    "venmo-button": ButtonProps;
+    "paypal-pay-later-button": PayLaterButtonProps;
+    "paypal-credit-button": PayPalCreditButtonProps;
+    "paypal-basic-card-button": PayPalBasicCardButtonProps;
+    "paypal-basic-card-container": HTMLAttributes<HTMLElement>;
+    "paypal-message": PayPalMessagesElement;
+};