Types

type CaptureContent = {
  description: string;
  attemptInfo: string;
  infoIcon: string;
  infoTooltip: string;
  action: {
    backIcon: string;
    takePhoto: string;
  };
};

type CaptureTheme = {
  frameContainer: {
    backgroundColor: string;
  };
  description: {
    color: string;
    fontSize: string;
    fontFamily: string;
  };
  attemptInfo: {
    color: string;
    fontSize: string;
    fontFamily: string;
  };
  action: {
    takePhoto: {
      backgroundColor: string;
      borderColor: string;
      color: string;
      fontSize: string;
      fontFamily: string;
      hover: {
        backgroundColor: string;
        borderColor: string;
        color: string;
      };
      disabled: {
        backgroundColor: string;
        borderColor: string;
        color: string;
      };
    };
  };
};

type CheckContent = {
  title: string;
  message: string;
  action: {
    backIcon: string;
    continue: string;
    retake: string;
  };
};

type CheckTheme = {
  frameContainer: {
    backgroundColor: string;
  };
  title: {
    color: string;
    fontSize: string;
    fontFamily: string;
  };
  message: {
    color: string;
    fontSize: string;
    fontFamily: string;
  };
  photoFrame: {
    borderColor: string;
  };
  action: {
    retake: {
      backgroundColor: string;
      borderColor: string;
      color: string;
      fontSize: string;
      fontFamily: string;
      hover: {
        backgroundColor: string;
        borderColor: string;
        color: string;
      };
    };
    continue: {
      backgroundColor: string;
      borderColor: string;
      color: string;
      fontSize: string;
      fontFamily: string;
      hover: {
        backgroundColor: string;
        borderColor: string;
        color: string;
      };
    };
  };
};

type CheckFailedContent = {
  title: string;
  message: string;
  action: {
    backIcon: string;
    retake: string;
  };
  chips: {
    badQuality: {
      message: string;
      icon: string;
    };
    notDetected: {
      message: string;
      icon: string;
    };
  };
  infoMessage: string;
  infoIcon: string;
  End: {
    message: string;
    action: {
      exit: string;
    };
  };
};

type CheckFailedTheme = {
  frameContainer: {
    backgroundColor: string;
  };
  title: {
    color: string;
    fontSize: string;
    fontFamily: string;
  };
  message: {
    color: string;
    fontSize: string;
    fontFamily: string;
  };
  photoFrame: {
    borderColor: string;
  };
  action: {
    retake: {
      backgroundColor: string;
      borderColor: string;
      color: string;
      fontSize: string;
      fontFamily: string;
      hover: {
        backgroundColor: string;
        borderColor: string;
        color: string;
      };
    };
  };
  chips: {
    badQuality: {
      backgroundColor: string;
      borderColor: string;
      color: string;
      fontSize: string;
      fontFamily: string;
    };
    notDetected: {
      backgroundColor: string;
      borderColor: string;
      color: string;
      fontSize: string;
      fontFamily: string;
    };
  };
  infoMessage: {
    color: string;
    fontSize: string;
    fontFamily: string;
  };
  End: {
    message: {
      color: string;
      fontSize: string;
      fontFamily: string;
    };
    action: {
      exit: {
        backgroundColor: string;
        borderColor: string;
        color: string;
        fontSize: string;
        fontFamily: string;
        hover: {
          backgroundColor: string;
          borderColor: string;
          color: string;
        };
      };
    };
  };
};

type CompletedContent = {
  image: string;
  message: string;
};

type CompletedTheme = {
  frameContainer: {
    backgroundColor: string;
  };
  message: {
    color: string;
    fontSize: string;
    fontFamily: string;
  };
};

type ConfirmationDialogTheme = {
  frameContainer: {
    backgroundColor: string;
  };
  title: {
    color: string;
    fontSize: string;
    fontFamily: string;
  };
  description: {
    color: string;
    fontSize: string;
    fontFamily: string;
  };
  photoFrame: {
    borderColor: string;
  };
  action: {
    cancel: {
      backgroundColor: string;
      borderColor: string;
      color: string;
      fontSize: string;
      fontFamily: string;
      hover: {
        backgroundColor: string;
        borderColor: string;
        color: string;
      };
    };
    ok: {
      backgroundColor: string;
      borderColor: string;
      color: string;
      fontSize: string;
      fontFamily: string;
      hover: {
        backgroundColor: string;
        borderColor: string;
        color: string;
      };
    };
  };
};

type Endpoint = {
  headers: Record<any, any>;
  params: Record<any, any>;
  url: Url;
};

type ErrorDialogContent = {
  icon: string;
  title: string;
  okText: string;
};

type ExitDialogContent = {
  icon: string;
  title: string;
  okText: string;
  cancelText: string;
};

type FormContent = {
  title: string;
  subtitle: string;
  action: {
    backIcon: string;
    submit: string;
  };
  formLabels: {
    nik: string;
    full_name: string;
    date_of_birth: string;
    place_of_birth: string;
    gender: string;
    blood_type: string;
    address: string;
    rt_rw: string;
    province: string;
    city: string;
    administrative_village: string;
    district: string;
    religion: string;
    marital_status: string;
    occupation: string;
    nationality: string;
  };
  formErrorTexts: {
    noEmpty: string;
    nikDigits: string;
  };
};

type FormTheme = {
  frameContainer: {
    backgroundColor: string;
  };
  title: {
    color: string;
    fontSize: string;
    fontFamily: string;
  };
  subtitle: {
    color: string;
    fontSize: string;
    fontFamily: string;
  };
  action: {
    submit: {
      backgroundColor: string;
      borderColor: string;
      color: string;
      fontSize: string;
      fontFamily: string;
      hover: {
        backgroundColor: string;
        borderColor: string;
        color: string;
      };
      disabled: {
        backgroundColor: string;
        borderColor: string;
        color: string;
      };
    };
  };
};

type InputTheme = {
  message: {
    color: string;
    fontFamily: string;
    error: {
      color: string;
      fontFamily: string;
    };
  };
  border: {
    borderColor: string;
    error: {
      borderColor: string;
    };
  };
  errorText: {
    color: string;
    fontFamily: string;
    fontSize: string;
    fontStyle: string;
  }
};

type InstructionPageContent = {
  title: string;
  subtitle: string;
  instructions: Array<{
    caption: string;
    image: string;
  }>;
  action: {
    start: string;
    continue: string;
  };
};

type InstructionTheme = {
  frameContainer: {
    backgroundColor: string;
  };
  title: {
    color: string;
    fontSize: string;
    fontFamily: string;
  };
  subtitle: {
    color: string;
    fontSize: string;
    fontFamily: string;
  };
  figure: {
    borderColor: string;
  };
  figcaption: {
    color: string;
    fontSize: string;
    fontFamily: string;
  };
  action: {
    start: {
      backgroundColor: string;
      borderColor: string;
      color: string;
      fontSize: string;
      fontFamily: string;
      hover: {
        backgroundColor: string;
        borderColor: string;
        color: string;
      };
    };
  };
};

type LoaderTheme = {
  message: {
    color: string;
    fontSize: string;
    fontFamily: string;
  };
};

type NotificationDialogTheme = {
  frameContainer: {
    backgroundColor: string;
  };
  title: {
    color: string;
    fontSize: string;
    fontFamily: string;
  };
  description: {
    color: string;
    fontSize: string;
    fontFamily: string;
  };
  action: {
    ok: {
      backgroundColor: string;
      borderColor: string;
      color: string;
      fontSize: string;
      fontFamily: string;
      hover: {
        backgroundColor: string;
        borderColor: string;
        color: string;
      };
    };
  };
};

type ContentConfiguration = {
  Instruction: InstructionContent;
  Capture: CaptureContent;
  Check: CheckContent;
  CheckFailed: CheckFailedContent;
  Processing: ProcessingContent;
  ErrorDialog: ErrorDialogContent;
  Form: FormContent;
  SubmissionDialog: SubmissionDialogContent;
  ExitDialog: ExitDialogContent;
  Completed: CompletedContent;
};

type OCRSDK = {
  onStart: (hideFrame?: boolean) => void;
  onDestroy: () => void;
};

onStart(hideFrame?: boolean): void;

onDestroy(): void;

type OCRThemeConfiguration = {
  Component: {
    Instruction: InstructionTheme;
    Capture: CaptureTheme;
    Check: CheckTheme;
    CheckFailed: CheckFailedTheme;
    NotificationDialog: NotificationDialogTheme;
    Form: FormTheme;
    ConfirmationDialog: ConfirmationDialogTheme;
    Shared: SharedTheme;
    Completed: CompletedTheme;
    Loader: LoaderTheme;
    Input: InputTheme;
  };
  Palette: ThemePalette;
  Typography: TypographyPalette;
  VendorPlaceholder: boolean;
};

type Palette = {
  contrastText: string;
  default: string;
  LIGHT: string;
  DARK: string;
};

type PaletteTheme = {
  primary: Palette;
  secondary: Palette;
};

type ProcessingContent = {
  message: string;
};

type ProxyMiddleware = {
  Extract: Endpoint;
  ExtractSync: Endpoint;
  ExtractResult: Endpoint;
  License: Endpoint;
};

type SubmissionDialogContent = {
  isAsync: boolean;
};

type SharedTheme = {
  background: {
    backgroundColor: string;
    backgroundImage: string;
    backgroundSize: string;
  };
};

type SubmissionDialogContent = {
  icon: string;
  title: string;
  okText: string;
  cancelText: string;
};

type TypographyTheme = {
  fontFamily: string[];
  fontSize: {
    title: string;
    body: string;
    caption: string;
    button: string;
  };
};

type Url = string;