Enable programmatic submission via Frames ref (submitCard); update docs, tests, and dependencies (#49)

* Update dependencies and improve integration tests

- Bump `expo` and `babel-preset-expo` versions in `package.json` and `package-lock.json`.
- Upgrade `jest-expo` to match the new `expo` version.
- Refactor integration tests for `Frames` component to mock network requests and improve validation checks.
- Remove redundant tests and ensure proper error handling for card tokenization.
- Add new tests for billing details and card validation events.

* Refactor Frames component and update TypeScript types

- Simplified state initialization in the Frames component by defining initialState separately.
- Updated TypeScript types to allow null values for card-related fields in FramesState.
- Changed autoCompleteType to autoComplete in CardNumber, Cvv, and ExpiryDate components for better compatibility.
- Ensured safe access to state properties by using nullish coalescing in input values.
- Refactored framesReducer to use a more explicit action parameter for better type safety.

* Enhance Frames component with programmatic submission and update tests

- Updated the Frames component to support programmatic card submission via a ref using `submitCard()`.
- Modified README to include new usage example for programmatic submission.
- Adjusted integration tests to validate the new submission method and ensure proper tokenization.
- Updated public key in tests and other files for consistency.

* Update version to 1.2.3 and refine GitHub Actions workflow

- Bumped package version from 1.2.2 to 1.2.3 in package.json.
- Improved formatting and structure of the GitHub Actions workflow in cd.yml for better readability and maintainability.
- Added conditional execution for the publish-npm job to ensure it only runs on pushes to the main branch.

Author: ioan-ghisoi-cko

.github/workflows/cd.yml

@@ -1,42 +1,42 @@
 name: Test and Deploy
 
 on:
-    push:
-        branches:
-            - main
-    pull_request:
-        branches: 
-            - main
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
 
 jobs:
-    test-and-coverage:
-        runs-on: ubuntu-latest
-        steps:
-            - uses: actions/checkout@master
-            - uses: actions/checkout@v4
-            - uses: actions/setup-node@v4
-              with:
-                  node-version: 21
-            - run: npm ci
-            - run: npm test
-            - name: Upload coverage to Codecov
-              uses: codecov/codecov-action@v1
-              with:
-                  token: ${{ secrets.CODECOV_TOKEN }}
-                  verbose: true
+  test-and-coverage:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 21
+      - run: npm ci
+      - run: npm test
+      - name: Upload coverage to Codecov
+        uses: codecov/codecov-action@v1
+        with:
+          token: ${{ secrets.CODECOV_TOKEN }}
+          verbose: true
 
-    publish-npm:
-        needs: test-and-coverage
-        runs-on: ubuntu-latest
-        steps:
-            - uses: actions/checkout@v4
-            - uses: actions/setup-node@v4
-              with:
-                  node-version: 21
-                  registry-url: https://registry.npmjs.org/
-            - run: npm ci
-            - run: npm run build
-            - run: cp -R src/icons dist/
-            - run: npm publish
-              env:
-                  NODE_AUTH_TOKEN: ${{secrets.NODE_AUTH_TOKEN}}
+  publish-npm:
+    if: ${{ github.event_name == 'push' && github.ref == 'refs/heads/main' }}
+    needs: test-and-coverage
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 21
+          registry-url: https://registry.npmjs.org/
+      - run: npm ci
+      - run: npm run build
+      - run: cp -R src/icons dist/
+      - run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.NODE_AUTH_TOKEN}}

README.md

@@ -57,7 +57,7 @@ export default function App() {
       <Frames
         config={{
           debug: true,
-          publicKey: "pk_test_4296fd52-efba-4a38-b6ce-cf0d93639d8a",
+          publicKey: "pk_sbox_eo3yb3urja2ozf6ycgn5kuy7ke#",
         }}
         cardTokenized={(e) => {
           alert(e.token);
@@ -144,7 +144,41 @@ const styles = StyleSheet.create({
 
 ## Trigger tokenization
 
-The tokenization is triggered when the SubmitButton is pressed. The process of getting the token is async, so the outcome of the tokenization will be shared in the _cardTokenized_ or _cardTokenizationFailed_ handlers.
+The tokenization is triggered when the `SubmitButton` is pressed, or programmatically via a ref on `Frames`.
+
+### Programmatic submit via ref
+
+You can attach a ref to `Frames` and call `submitCard()` imperatively:
+
+```tsx
+import React, { useRef } from "react";
+import { Frames, CardNumber, ExpiryDate, Cvv } from "frames-react-native";
+import type { FramesRef } from "frames-react-native";
+
+export const Example = () => {
+  const framesRef = useRef<FramesRef>(null);
+
+  const onCustomPress = () => {
+    framesRef.current?.submitCard();
+  };
+
+  return (
+    <Frames
+      ref={framesRef}
+      config={{ debug: true, publicKey: "pk_test_..." }}
+      cardTokenized={(e) => console.log(e.token)}
+    >
+      <CardNumber />
+      <ExpiryDate />
+      <Cvv />
+      {/* Use your own button UI */}
+      <MyCustomButton onPress={onCustomPress} />
+    </Frames>
+  );
+};
+```
+
+The process of getting the token is async, so the outcome of the tokenization will be shared in the `cardTokenized` or `cardTokenizationFailed` handlers.
 
 ## The `props` for the Frames wrapper component