frames-react-native 1.2.5 → 1.2.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frames-react-native",
-  "version": "1.2.5",
+  "version": "1.2.6",
   "description": "Frames React Native",
   "main": "dist/index.js",
   "scripts": {
@@ -10,9 +10,11 @@
   },
   "dependencies": {
     "creditcards": "^4.2.0",
-    "creditcards-types": "^3.2.0",
-    "expo": "^53.0.0",
-    "node-fetch": "^2.6.7"
+    "creditcards-types": "^3.2.0"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-native": ">=0.60.0"
   },
   "keywords": [],
   "author": "",
@@ -21,21 +23,16 @@
     "@babel/cli": "^7.0.0",
     "@babel/core": ">=7.23.2",
     "@babel/preset-react": "^7.12.13",
-    "@testing-library/jest-dom": "^5.11.9",
+    "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/jest-native": "3.3.0",
     "@testing-library/react-native": "^7.1.0",
     "@types/jest": "^26.0.20",
-    "@types/node-fetch": "^2.5.8",
     "@types/react": "^18.2.75",
     "@types/react-test-renderer": "^18.0.7",
-    "@types/uuid": "^9.0.1",
-    "babel-preset-expo": "^11.0.0",
     "jest": ">=29.7.0",
-    "jest-expo": "^53.0.0",
     "react": "~18.2.0",
     "react-native": "~0.73.6",
     "react-test-renderer": "18.2.0",
-    "ts-jest": "^29.1.2",
     "typescript": "~5.4.4"
   },
   "jest": {

package/.github/workflows/cd.yml

@@ -1,42 +0,0 @@
-name: Test and Deploy
-
-on:
-  push:
-    branches:
-      - main
-  pull_request:
-    branches:
-      - main
-
-jobs:
-  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:
-    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}}

package/.github/workflows/ci.yml

@@ -1,15 +0,0 @@
-name: CI Tests
-
-on: [push, pull_request]
-
-jobs:
-  test:
-    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

package/__mocks__/fileTransformer.js

@@ -1,9 +0,0 @@
-const path = require('path');
-
-module.exports = {
-    process(sourceText, sourcePath, options) {
-        return {
-            code: `module.exports = ${JSON.stringify(path.basename(sourcePath))};`,
-        };
-    },
-};

package/__tests__/CardUtils.test.tsx

@@ -1,43 +0,0 @@
-import {
-  formatCard,
-  getCardType,
-  getIcon,
-  isValidCard,
-  cvvLength,
-  isValidCvv,
-  isValidDate,
-} from "../src/utils/card";
-
-describe("card utils", () => {
-  it("formats and validates card number", () => {
-    expect(formatCard("4242424242424242")).toBe("4242 4242 4242 4242");
-    expect(isValidCard("4242 4242 4242 4242")).toBe(true);
-  });
-
-  it("detects card type including extended whitelist (Discover)", () => {
-    expect(getCardType("6011111111111117")).toBe("Discover");
-  });
-
-  it("cvvLength varies by type (Amex -> 4)", () => {
-    // Amex test number
-    const amex = "378282246310005";
-    expect(cvvLength(amex)).toBe(4);
-    expect(cvvLength("4242 4242 4242 4242")).toBe(3);
-  });
-
-  it("validates cvv by inferred type", () => {
-    // Amex 4-digit CVC (It's an AMEX Test card number)
-    expect(isValidCvv("1234", "345678901234564")).toBe(true);
-    // Visa 3-digit CVC
-    expect(isValidCvv("123", "4242 4242 4242 4242")).toBe(true);
-  });
-
-  it("getIcon returns undefined for unknown type", () => {
-    // @ts-ignore
-    expect(getIcon("UnknownBrand")).toBeUndefined();
-  });
-
-  it("isValidDate rejects incomplete or past dates", () => {
-    expect(isValidDate("06/")).toBe(false);
-  });
-});

package/__tests__/FramesContextGuards.test.tsx

@@ -1,30 +0,0 @@
-import React from "react";
-import { render } from "@testing-library/react-native";
-
-import { CardNumber, ExpiryDate, Cvv, SubmitButton } from "../src/index";
-
-describe("Component context guards", () => {
-  it("throws when CardNumber is rendered outside Frames", () => {
-    expect(() => render(<CardNumber />)).toThrow(
-      "It looks like you are trying to render the CardNumber outside of the Frames Component."
-    );
-  });
-
-  it("throws when ExpiryDate is rendered outside Frames", () => {
-    expect(() => render(<ExpiryDate />)).toThrow(
-      "It looks like you are trying to render the ExpiryDate outside of the Frames Component."
-    );
-  });
-
-  it("throws when Cvv is rendered outside Frames", () => {
-    expect(() => render(<Cvv />)).toThrow(
-      "It looks like you are trying to render the Cvv outside of the Frames Component."
-    );
-  });
-
-  it("throws when SubmitButton is rendered outside Frames", () => {
-    expect(() => render(<SubmitButton title="Pay" />)).toThrow(
-      "It looks like you are trying to render the SubmitButton outside of the Frames Component."
-    );
-  });
-});

package/__tests__/HttpAndLogger.test.tsx

@@ -1,204 +0,0 @@
-import React from "react";
-import { render, fireEvent, waitFor } from "@testing-library/react-native";
-
-import {
-  Frames,
-  CardNumber,
-  ExpiryDate,
-  Cvv,
-  SubmitButton,
-} from "../src/index";
-
-import { SANDBOX_LOGGER, LIVE_LOGGER } from "../src/utils/constants";
-
-describe("http.tokenize and helpers", () => {
-  const { tokenize, formatDataForTokenization, getEnvironment } =
-    jest.requireActual("../src/utils/http");
-
-  beforeEach(() => {
-    // @ts-ignore
-    global.fetch = jest.fn();
-  });
-
-  it("tokenize returns json when response ok", async () => {
-    // @ts-ignore
-    global.fetch.mockResolvedValueOnce({
-      ok: true,
-      json: jest.fn().mockResolvedValue({ ok: true }),
-    });
-
-    const res = await tokenize({
-      key: "pk_sbox_dummy",
-      body: {
-        type: "card",
-        number: "4242424242424242",
-        expiry_month: "12",
-        expiry_year: "2030",
-        cvv: "123",
-      },
-    });
-
-    expect(res).toEqual({ ok: true });
-  });
-
-  it("tokenize throws json when response not ok", async () => {
-    // @ts-ignore
-    global.fetch.mockResolvedValueOnce({
-      ok: false,
-      json: jest.fn().mockResolvedValue({ error: "bad" }),
-    });
-
-    await expect(
-      tokenize({
-        key: "pk_sbox_dummy",
-        body: {
-          type: "card",
-          number: "4242424242424242",
-          expiry_month: "12",
-          expiry_year: "2030",
-          cvv: "123",
-        },
-      })
-    ).rejects.toEqual({ error: "bad" });
-  });
-
-  it("formatDataForTokenization maps fields and billing address including addressLine2", () => {
-    const { EXPIRY_DATE_DELIMITER } = require("../src/utils/constants");
-    const state = {
-      cardNumber: "4242 4242 4242 4242",
-      cardBin: { bin: null, scheme: null },
-      cardIcon: undefined,
-      cardType: null,
-      expiryDate: `12${EXPIRY_DATE_DELIMITER}30`,
-      cvv: "123",
-      cvvLength: 3,
-      validation: { cardNumber: true, expiryDate: true, cvv: true, card: true },
-    };
-
-    const config = {
-      publicKey: "pk_sbox_dummy",
-      cardholder: {
-        name: "John Doe",
-        phone: "+1234567890",
-        billingAddress: {
-          addressLine1: "Line 1",
-          addressLine2: "Line 2",
-          city: "City",
-          state: "ST",
-          zip: "12345",
-          country: "US",
-        },
-      },
-    };
-
-    const params = formatDataForTokenization(state, config);
-    expect(params.key).toBe(config.publicKey);
-    expect(params.body.number).toBe("4242424242424242");
-    expect(params.body.expiry_month).toBe("12");
-    expect(params.body.expiry_year).toMatch(/^20\d{2}$/);
-    expect(params.body.cvv).toBe("123");
-    expect(params.body.name).toBe("John Doe");
-    expect(params.body.billing_address).toEqual({
-      address_line1: "Line 1",
-      address_line2: "Line 2",
-      city: "City",
-      state: "ST",
-      zip: "12345",
-      country: "US",
-    });
-    expect(params.body.phone).toEqual({ number: "+1234567890" });
-  });
-
-  it("formatDataForTokenization sets billing_address to null when not provided", () => {
-    const state = {
-      cardNumber: "4242 4242 4242 4242",
-      cardBin: { bin: null, scheme: null },
-      cardIcon: undefined,
-      cardType: null,
-      expiryDate: "12/30",
-      cvv: "123",
-      cvvLength: 3,
-      validation: { cardNumber: true, expiryDate: true, cvv: true, card: true },
-    };
-
-    const config = {
-      publicKey: "pk_sbox_dummy",
-      cardholder: { name: "John Doe" },
-    };
-
-    const params = formatDataForTokenization(state, config);
-    // @ts-ignore
-    expect(params.body.billing_address).toBeNull();
-  });
-
-  it("getEnvironment returns expected token URL", () => {
-    expect(getEnvironment("pk_sbox_dummy")).toBe(
-      "https://api.sandbox.checkout.com/tokens"
-    );
-  });
-});
-
-describe("logger.log", () => {
-  const { log, getEnvironment } = require("../src/utils/logger");
-
-  beforeEach(() => {
-    // @ts-ignore
-    global.fetch = jest.fn().mockResolvedValue({});
-  });
-
-  it("posts to sandbox logger with structured body", async () => {
-    await log("info", "type_event", { publicKey: "pk_sbox_dummy" }, { a: 1 });
-
-    expect(global.fetch).toHaveBeenCalledWith(
-      SANDBOX_LOGGER,
-      expect.anything()
-    );
-    const [, options] = (global.fetch as jest.Mock).mock.calls[0];
-    const body = JSON.parse(options.body);
-    expect(body.specversion).toBe("1.0");
-    expect(body.type).toBe("type_event");
-    expect(body.data.environment).toBe("sandbox");
-    expect(body.cko.loglevel).toBe("info");
-  });
-
-  it("getEnvironment returns live logger for prod keys", () => {
-    expect(getEnvironment("pk_4296fd52-efba-4a38-b6ce-cf0d93639d8a")).toBe(
-      LIVE_LOGGER
-    );
-  });
-});
-
-describe("Frames error path on tokenization failure", () => {
-  it("emits cardTokenizationFailed when tokenization rejects", async () => {
-    const httpMod = require("../src/utils/http");
-    jest.spyOn(httpMod, "tokenize").mockRejectedValueOnce({ error: "failure" });
-
-    const { Frames } = require("../src/index");
-
-    const cardTokenizationFailed = jest.fn();
-
-    const screen = render(
-      <Frames
-        config={{ publicKey: "pk_sbox_dummy", debug: true }}
-        cardTokenizationFailed={cardTokenizationFailed}
-      >
-        <CardNumber />
-        <ExpiryDate />
-        <Cvv />
-        <SubmitButton title="Pay" />
-      </Frames>
-    );
-
-    fireEvent.changeText(
-      screen.getByPlaceholderText("•••• •••• •••• ••••"),
-      "4242 4242 4242 4242"
-    );
-    fireEvent.changeText(screen.getByPlaceholderText("MM/YY"), "12/30");
-    fireEvent.changeText(screen.getByPlaceholderText("•••"), "123");
-
-    fireEvent.press(screen.getByText("Pay"));
-
-    await waitFor(() => expect(cardTokenizationFailed).toHaveBeenCalled());
-    expect(cardTokenizationFailed).toHaveBeenCalledWith({ error: "failure" });
-  });
-});

package/__tests__/Integration.test.tsx

@@ -1,232 +0,0 @@
-import React, { createRef } from "react";
-import { render, fireEvent, waitFor } from "@testing-library/react-native";
-
-import {
-  Frames,
-  CardNumber,
-  ExpiryDate,
-  Cvv,
-  SubmitButton,
-} from "../src/index";
-import type { FramesRef } from "../src/index";
-
-// Mock network-dependent modules to avoid real HTTP requests
-jest.mock("../src/utils/http", () => {
-  const actual = jest.requireActual("../src/utils/http");
-  return {
-    ...actual,
-    tokenize: jest.fn(),
-  };
-});
-
-jest.mock("../src/utils/logger", () => {
-  const actual = jest.requireActual("../src/utils/logger");
-  return {
-    ...actual,
-    log: jest.fn(),
-  };
-});
-
-describe("Frames integration", () => {
-  const validVisa = "4242 4242 4242 4242"; // Visa test number
-  const validExpiry = "12/30"; // future year
-  const validCvv = "123";
-
-  const config = {
-    publicKey: "pk_sbox_eo3yb3urja2ozf6ycgn5kuy7ke#",
-    debug: true,
-    cardholder: {
-      name: "John Doe",
-      phone: "+1234567890",
-      billingAddress: {
-        addressLine1: "123 Test St",
-        city: "Test City",
-        state: "TS",
-        zip: "12345",
-        country: "US",
-      },
-    },
-  };
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  it("emits validation and bin events, and tokenizes on submit", async () => {
-    const { tokenize } = require("../src/utils/http");
-
-    const mockTokenResponse = {
-      type: "card",
-      token: "tok_test_123",
-      expires_on: "2030-12-31T23:59:59Z",
-      expiry_month: 12,
-      expiry_year: 2030,
-      scheme: "Visa",
-      last4: "4242",
-      bin: "424242",
-    };
-
-    tokenize.mockResolvedValueOnce(mockTokenResponse);
-
-    const frameValidationChanged = jest.fn();
-    const paymentMethodChanged = jest.fn();
-    const cardValidationChanged = jest.fn();
-    const cardTokenized = jest.fn();
-    const cardTokenizationFailed = jest.fn();
-    const cardBinChanged = jest.fn();
-
-    const screen = render(
-      <Frames
-        config={config}
-        frameValidationChanged={frameValidationChanged}
-        paymentMethodChanged={paymentMethodChanged}
-        cardValidationChanged={cardValidationChanged}
-        cardTokenized={cardTokenized}
-        cardTokenizationFailed={cardTokenizationFailed}
-        cardBinChanged={cardBinChanged}
-      >
-        <CardNumber />
-        <ExpiryDate />
-        <Cvv />
-        <SubmitButton title="Pay" />
-      </Frames>
-    );
-
-    const cardNumberInput = screen.getByPlaceholderText("•••• •••• •••• ••••");
-    const expiryInput = screen.getByPlaceholderText("MM/YY");
-    const cvvInput = screen.getByPlaceholderText("•••");
-
-    // Enter card number -> should emit bin and payment method changes
-    fireEvent.changeText(cardNumberInput, validVisa);
-
-    await waitFor(() => expect(paymentMethodChanged).toHaveBeenCalled());
-    expect(paymentMethodChanged).toHaveBeenCalledWith(
-      expect.objectContaining({ paymentMethod: "Visa", isValid: false })
-    );
-
-    await waitFor(() => expect(cardBinChanged).toHaveBeenCalled());
-    expect(cardBinChanged).toHaveBeenCalledWith(
-      expect.objectContaining({
-        bin: expect.stringMatching(/^42424242/),
-        scheme: "Visa",
-      })
-    );
-
-    // Enter expiry date
-    fireEvent.changeText(expiryInput, validExpiry);
-
-    // Enter cvv
-    fireEvent.changeText(cvvInput, validCvv);
-
-    // After all fields valid, cardValidationChanged should report isValid: true
-    await waitFor(() => expect(cardValidationChanged).toHaveBeenCalled());
-    expect(cardValidationChanged).toHaveBeenLastCalledWith(
-      expect.objectContaining({
-        isValid: true,
-        isElementValid: expect.objectContaining({
-          cardNumber: true,
-          expiryDate: true,
-          cvv: true,
-        }),
-      })
-    );
-
-    // Submit and expect tokenization to be called and success event emitted
-    const payButton = screen.getByText("Pay");
-    fireEvent.press(payButton);
-
-    await waitFor(() => expect(tokenize).toHaveBeenCalledTimes(1));
-    expect(cardTokenized).toHaveBeenCalledWith(mockTokenResponse);
-    expect(cardTokenizationFailed).not.toHaveBeenCalled();
-  });
-
-  it("allows submitting via Frames ref submitCard()", async () => {
-    const { tokenize } = require("../src/utils/http");
-
-    const mockTokenResponse = {
-      type: "card",
-      token: "tok_test_ref_123",
-      expires_on: "2030-12-31T23:59:59Z",
-      expiry_month: 12,
-      expiry_year: 2030,
-      scheme: "Visa",
-      last4: "4242",
-      bin: "424242",
-    };
-
-    tokenize.mockResolvedValueOnce(mockTokenResponse);
-
-    const cardTokenized = jest.fn();
-
-    const ref = createRef<FramesRef>();
-
-    const screen = render(
-      <Frames config={config} cardTokenized={cardTokenized} ref={ref}>
-        <CardNumber />
-        <ExpiryDate />
-        <Cvv />
-      </Frames>
-    );
-
-    const cardNumberInput = screen.getByPlaceholderText("•••• •••• •••• ••••");
-    const expiryInput = screen.getByPlaceholderText("MM/YY");
-    const cvvInput = screen.getByPlaceholderText("•••");
-
-    // Fill valid data
-    fireEvent.changeText(cardNumberInput, validVisa);
-    fireEvent.changeText(expiryInput, validExpiry);
-    fireEvent.changeText(cvvInput, validCvv);
-
-    // Call submit via ref
-    await waitFor(async () => {
-      expect(ref.current).not.toBeNull();
-    });
-
-    await ref.current!.submitCard();
-
-    await waitFor(() => expect(tokenize).toHaveBeenCalledTimes(1));
-    expect(cardTokenized).toHaveBeenCalledWith(mockTokenResponse);
-  });
-
-  it("SubmitButton triggers submitCard and forwards onPress to consumer", async () => {
-    const { tokenize } = require("../src/utils/http");
-
-    const mockTokenResponse = {
-      type: "card",
-      token: "tok_test_press_123",
-      expires_on: "2030-12-31T23:59:59Z",
-      expiry_month: 12,
-      expiry_year: 2030,
-      scheme: "Visa",
-      last4: "4242",
-      bin: "424242",
-    };
-
-    tokenize.mockResolvedValueOnce(mockTokenResponse);
-
-    const onPressSpy = jest.fn();
-    const cardTokenized = jest.fn();
-
-    const screen = render(
-      <Frames config={config} cardTokenized={cardTokenized}>
-        <CardNumber />
-        <ExpiryDate />
-        <Cvv />
-        <SubmitButton title="Pay" onPress={onPressSpy} />
-      </Frames>
-    );
-
-    fireEvent.changeText(
-      screen.getByPlaceholderText("•••• •••• •••• ••••"),
-      validVisa
-    );
-    fireEvent.changeText(screen.getByPlaceholderText("MM/YY"), validExpiry);
-    fireEvent.changeText(screen.getByPlaceholderText("•••"), validCvv);
-
-    fireEvent.press(screen.getByText("Pay"));
-
-    await waitFor(() => expect(tokenize).toHaveBeenCalledTimes(1));
-    expect(cardTokenized).toHaveBeenCalledWith(mockTokenResponse);
-    expect(onPressSpy).toHaveBeenCalledTimes(1);
-  });
-});

package/__tests__/Unit.test.tsx

@@ -1,60 +0,0 @@
-import { isValidDate } from "../src/utils/card";
-import { getFormattedDate } from "../src/utils/date";
-import { getEnvironment } from "../src/utils/http";
-import { getEnvironment as loggerGetEnvironment } from "../src/utils/logger";
-
-const PK_SB = "pk_sbox_eo3yb3urja2ozf6ycgn5kuy7ke#";
-const PK_PROD = "pk_4296fd52-efba-4a38-b6ce-cf0d93639d8a"; // fake key
-
-describe("Date", () => {
-  it("formats date", async () => {
-    let outcome = isValidDate("06/");
-    expect(outcome).toBe(false);
-  });
-
-  it("adds 0 for date values", async () => {
-    let outcome = getFormattedDate("6");
-    expect(outcome).toBe("06/");
-  });
-
-  it("allows leading 0 for date values", async () => {
-    let outcome = getFormattedDate("0");
-    expect(outcome).toBe("0");
-  });
-
-  it("ignores other date values", async () => {
-    let outcome = getFormattedDate("!");
-    expect(outcome).toBe("!");
-  });
-});
-
-describe("Environment", () => {
-  it("it gets the live environment", async () => {
-    let env = getEnvironment(PK_PROD);
-    expect(env).toBe("https://api.checkout.com/tokens");
-  });
-
-  it("gets the sb environment", async () => {
-    let env = getEnvironment(PK_SB);
-    expect(env).toBe("https://api.sandbox.checkout.com/tokens");
-  });
-});
-
-describe("Logger Environment", () => {
-  it("it gets the live environment", async () => {
-    let env = loggerGetEnvironment(PK_PROD);
-    expect(env).toBe("https://cloudevents.integration.checkout.com/logging");
-  });
-
-  it("gets the sb environment", async () => {
-    let env = loggerGetEnvironment(PK_SB);
-    expect(env).toBe(
-      "https://cloudevents.integration.sandbox.checkout.com/logging"
-    );
-  });
-
-  it("returns empty", async () => {
-    let date = getFormattedDate("");
-    expect(date).toBe("");
-  });
-});