@olo/pay-react-native/src/components/specs/PaymentCardDetailsViewNativeComponent.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 CardDetailsEventData {
  isValid: boolean;
  cardType: string;
  invalidFields: string[];
  emptyFields: string[];
  errors?: {
    allFieldsError?: string;
    editedFieldsError?: string;
  };
}

interface FocusFieldEventData {
  field: string;
}

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 styles
export interface PaymentCardDetailsNativeViewStyles {
  backgroundColor?: string;
  borderColor?: string;
  borderWidth?: Double;
  cornerRadius?: Double;
  cursorColor?: string;
  fontFamily?: string;
  fontSize?: Double;
  placeholderColor?: string;
  textColor?: string;
  errorTextColor?: string;
  textPaddingLeft?: Double;
  textPaddingRight?: Double;
  fontWeight?: string;
  italic?: boolean;
}

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

// Custom error messages
export interface CustomFieldError {
  emptyError?: string;
  invalidError?: string;
}

export interface CustomErrorMessages {
  number?: CustomFieldError;
  expiration?: CustomFieldError;
  cvv?: CustomFieldError;
  postalCode?: CustomFieldError;
  unsupportedCardError?: string;
}

export interface NativeProps extends ViewProps {
  isEnabled?: WithDefault<boolean, true>;
  postalCodeEnabled?: WithDefault<boolean, true>;
  cardStyles?: PaymentCardDetailsNativeViewStyles;
  placeholders?: PaymentCardDetailsPlaceholders;
  customErrorMessages?: CustomErrorMessages;

  // Events
  onCardChangeEvent?: DirectEventHandler<CardDetailsEventData>;
  onFocusEvent?: DirectEventHandler<null>;
  onBlurEvent?: DirectEventHandler<null>;
  onFocusFieldEvent?: DirectEventHandler<FocusFieldEventData>;
  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>(
  'PaymentCardDetailsView'
) as HostComponent<NativeProps>;