@olo/pay-react-native/src/components/specs/PaymentCardDetailsFormNativeComponent.ts

Olo Pay React Native SDK

// Copyright © 2022 Olo Inc. All rights reserved.
// This software is made available under the Olo Pay SDK License (See LICENSE.md file)
import {
  codegenNativeComponent,
  codegenNativeCommands,
  type ViewProps,
  type HostComponent,
} from 'react-native';
import type {
  DirectEventHandler,
  Double,
  Int32,
  WithDefault,
} from 'react-native/Libraries/Types/CodegenTypes';

// Event types - inline definitions required for codegen (mirrors types in definitions.ts)
interface FormCompleteEventData {
  isValid: boolean;
}

interface PaymentMethodResultEventData {
  paymentMethod?: {
    id: string;
    last4: string;
    cardType: string;
    expMonth: Int32;
    expYear: Int32;
    postalCode: string;
    countryCode: string;
    isDigitalWallet: boolean;
    productionEnvironment: boolean;
    email: string;
    digitalWalletCardDescription: string;
    fullName: string;
    fullPhoneticName: string;
    phoneNumber: string;
    // Billing address defined inline for codegen compatibility
    billingAddress: {
      address1: string;
      address2: string;
      address3: string;
      locality: string;
      postalCode: string;
      countryCode: string;
      administrativeArea: string;
      sortingCode: string;
    };
  };
  error?: {
    code: string;
    message: string;
  };
}

// Nested style object for card form styles
export interface PaymentCardDetailsFormNativeViewStyles {
  backgroundColor?: string;
  borderColor?: string;
  borderWidth?: Double;
  cornerRadius?: Double;
  cursorColor?: string;
  fontFamily?: string;
  fontSize?: Double;
  placeholderColor?: string;
  textColor?: string;
  textPaddingLeft?: Double;
  textPaddingRight?: Double;
  fontWeight?: string;
  italic?: boolean;
  fieldDividerColor?: string;
  fieldDividerWidth?: Double;
  focusedPlaceholderColor?: string;
  cardElevation?: Double;
}

// Placeholder strings
export interface PaymentCardDetailsFormPlaceholders {
  number?: string;
  expiration?: string;
  cvv?: string;
  postalCode?: string;
}

export interface NativeProps extends ViewProps {
  isEnabled?: WithDefault<boolean, true>;
  cardStyles?: PaymentCardDetailsFormNativeViewStyles;
  placeholders?: PaymentCardDetailsFormPlaceholders;

  // Events
  onFormCompleteEvent?: DirectEventHandler<FormCompleteEventData>;
  onPaymentMethodResultEvent?: DirectEventHandler<PaymentMethodResultEventData>;
}

// Command definitions for native methods
interface NativeCommands {
  focus: (viewRef: React.ElementRef<HostComponent<NativeProps>>, field: string) => void;
  blur: (viewRef: React.ElementRef<HostComponent<NativeProps>>) => void;
  clear: (viewRef: React.ElementRef<HostComponent<NativeProps>>) => void;
  createPaymentMethod: (viewRef: React.ElementRef<HostComponent<NativeProps>>) => void;
}

export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
  supportedCommands: ['focus', 'blur', 'clear', 'createPaymentMethod'],
});

export default codegenNativeComponent<NativeProps>(
  'PaymentCardDetailsForm'
) as HostComponent<NativeProps>;