@teamrepeat/card-token 1.0.0

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { useCardToken, CardTokenIframe } from "./useCardToken";
+export type { CardTokenResult } from "./useCardToken";

package/dist/index.js

@@ -0,0 +1 @@
+export { useCardToken, CardTokenIframe } from "./useCardToken";

package/dist/useCardToken.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+export interface CardTokenResult {
+    success: boolean;
+    token?: string;
+    error?: string;
+}
+export declare const useCardToken: () => {
+    loading: boolean;
+    result: CardTokenResult | null;
+};
+interface CardTokenIframeProps {
+    language: "is" | "en" | "de";
+    styles?: {
+        borderRadius?: number;
+        buttonBackground?: string;
+        buttonColor?: string;
+        color?: string;
+        errorColor?: string;
+        fontFamily?: string;
+    };
+}
+export declare const CardTokenIframe: React.FC<CardTokenIframeProps>;
+export {};

package/dist/useCardToken.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+export const useCardToken = () => {
+    const [loading, setLoading] = useState(false);
+    const [result, setResult] = useState(null);
+    useEffect(() => {
+        const handleMessage = (event) => {
+            if ("repeatCardSaveSuccess" in event.data) {
+                const success = event.data.repeatCardSaveSuccess;
+                const token = event.data.cardToken;
+                setResult({ success, token });
+                setLoading(false);
+            }
+            else if (event.data.type === "cardSaveFailed") {
+                setResult({ success: false, error: "Card save failed" });
+                setLoading(false);
+            }
+        };
+        window.addEventListener("message", handleMessage);
+        return () => window.removeEventListener("message", handleMessage);
+    }, []);
+    return { loading, result };
+};
+export const CardTokenIframe = ({ language, styles, }) => {
+    const { borderRadius, buttonBackground, buttonColor, color, errorColor, fontFamily, } = styles || {};
+    let url = `http://localhost:8000/get_card_token_iframe/06f8030a-bab8-45a8-b7bd-bc41fb0cf668/?language=${language || "is"}&languageSelector=false`;
+    if (borderRadius != null)
+        url += `&borderRadius=${borderRadius}`;
+    if (buttonBackground)
+        url += `&buttonBackground=${encodeURIComponent(buttonBackground)}`;
+    if (buttonColor)
+        url += `&buttonColor=${encodeURIComponent(buttonColor)}`;
+    if (color)
+        url += `&color=${encodeURIComponent(color)}`;
+    if (errorColor)
+        url += `&errorColor=${encodeURIComponent(errorColor)}`;
+    if (fontFamily)
+        url += `&fontFamily=${fontFamily}`;
+    return (_jsx("div", { style: { width: "100%", height: 600 }, children: _jsx("iframe", { src: url, style: { width: "100%", height: "100%", border: "none" }, title: "Kort" }) }));
+};

package/package.json

@@ -0,0 +1,20 @@
+{
+    "name": "@teamrepeat/card-token",
+    "version": "1.0.0",
+    "description": "React hook and iframe component to fetch card tokens",
+    "main": "dist/index.js",
+    "types": "dist/index.d.ts",
+    "scripts": {
+        "build": "tsc",
+        "prepublishOnly": "yarn build"
+    },
+    "author": "Repeat.is",
+    "license": "MIT",
+    "peerDependencies": {
+        "react": "^17.0.0 || ^18.0.0"
+    },
+    "devDependencies": {
+        "typescript": "^5.0.0",
+        "@types/react": "^18.0.0"
+    }
+}