@teamrepeat/card-token 1.0.7 → 1.0.8

package/README.md

@@ -0,0 +1 @@
+

package/TEAM_README.md

@@ -0,0 +1,9 @@
+# Team Documentation - Card Token Widget
+
+## Internal Development Guide
+
+### How to deploy to NPM
+
+1. Change the version in `package.json`
+2. Run `npm run build` to build the package
+3. Run `npm publish` to publish the package to NPX

package/dist/useCardToken.d.ts

@@ -15,6 +15,8 @@ interface RepeatCardTokenWidgetProps {
         errorColor?: string;
         fontFamily?: string;
     };
+    onWidgetMount?: () => void;
+    onWidgetMountError?: (error: React.SyntheticEvent<HTMLIFrameElement, Event>) => void;
 }
 export declare const RepeatCardTokenWidget: React.FC<RepeatCardTokenWidgetProps>;
 export {};

package/dist/useCardToken.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect } from "react";
-export const RepeatCardTokenWidget = ({ language, styles, isLocal, shopUUID, onTokenSuccess, onTokenError, }) => {
+import { useEffect, useState } from "react";
+export const RepeatCardTokenWidget = ({ language, styles, isLocal, shopUUID, onTokenSuccess, onTokenError, onWidgetMount, onWidgetMountError, }) => {
     const { borderRadius, buttonBackground, buttonColor, color, errorColor, fontFamily, } = styles || {};
+    const [isLoaded, setIsLoaded] = useState(false);
     useEffect(() => {
         const handleMessage = (event) => {
             const data = event.data;
             if ("repeatCardSaveSuccess" in data) {
-                console.log("event", event);
                 const success = data.repeatCardSaveSuccess;
                 const token = data.cardToken;
                 if (success) {
@@ -35,5 +35,16 @@ export const RepeatCardTokenWidget = ({ language, styles, isLocal, shopUUID, onT
         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" }) }));
+    return (_jsx("div", { style: { width: "100%", height: 600 }, children: !isLoaded ? (_jsx("div", { style: {
+                width: "100%",
+                height: "100%",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+            }, children: _jsx("div", { className: "skeletonBox", style: { width: 100, height: 100 } }) })) : (_jsx("iframe", { src: url, style: { width: "100%", height: "100%", border: "none" }, title: "Kort", onLoad: () => {
+                setIsLoaded(true);
+                onWidgetMount?.();
+            }, onError: (error) => {
+                onWidgetMountError?.(error);
+            } })) }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@teamrepeat/card-token",
-    "version": "1.0.7",
+    "version": "1.0.8",
     "description": "React hook and iframe component to fetch card tokens",
     "main": "dist/index.js",
     "types": "dist/index.d.ts",