@munchi_oy/react 1.2.5

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./src/SdkContainer";
+export * from "./src/useMunchi";
+export * from "./src/usePaymentCountdown";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,2BAA2B,CAAC"}

package/dist/index.js

@@ -0,0 +1 @@
+"use strict";var a=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var C=Object.getOwnPropertyNames;var h=Object.prototype.hasOwnProperty;var P=(t,e)=>{for(var n in e)a(t,n,{get:e[n],enumerable:!0})},l=(t,e,n,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of C(e))!h.call(t,o)&&o!==n&&a(t,o,{get:()=>e[o],enumerable:!(r=k(e,o))||r.enumerable});return t};var M=t=>l(a({},"__esModule",{value:!0}),t);var D={};P(D,{SdkContainer:()=>b,SdkContext:()=>u,useMunchi:()=>S,usePaymentCountdown:()=>w,usePaymentState:()=>T,usePayments:()=>I,useSdk:()=>i});module.exports=M(D);var m=require("react"),f=require("react/jsx-runtime"),u=(0,m.createContext)(void 0),b=({children:t,sdk:e})=>{let n=(0,m.useMemo)(()=>({sdk:e}),[e]);return(0,f.jsx)(u.Provider,{value:n,children:t})};var s=require("react");var S=()=>{let t=(0,s.useContext)(u);if(!t)throw new Error("useMunchi must be used within a SdkContainer");return t},i=()=>{let{sdk:t}=S();return t},I=i,T=()=>{let t=i(),[e,n]=(0,s.useState)(t.currentState);return(0,s.useEffect)(()=>t.subscribe(r=>{n(r)}),[t]),e};var c=require("react");var w=()=>{let t=i(),[e,n]=(0,c.useState)(null);return(0,c.useEffect)(()=>{let r,o=()=>{let p=t.nextAutoResetAt;if(!p){n(null);return}let y=Date.now(),d=Math.max(0,p-y);n(d),d>0&&(r=requestAnimationFrame(o))};o();let x=t.subscribe(()=>{o()});return()=>{x(),r&&cancelAnimationFrame(r)}},[t]),e};0&&(module.exports={SdkContainer,SdkContext,useMunchi,usePaymentCountdown,usePaymentState,usePayments,useSdk});

package/dist/index.mjs

@@ -0,0 +1 @@
+import{createContext as p,useMemo as d}from"react";import{jsx as f}from"react/jsx-runtime";var i=p(void 0),l=({children:t,sdk:e})=>{let n=d(()=>({sdk:e}),[e]);return f(i.Provider,{value:n,children:t})};import{useContext as S,useEffect as x,useState as y}from"react";var k=()=>{let t=S(i);if(!t)throw new Error("useMunchi must be used within a SdkContainer");return t},r=()=>{let{sdk:t}=k();return t},w=r,D=()=>{let t=r(),[e,n]=y(t.currentState);return x(()=>t.subscribe(o=>{n(o)}),[t]),e};import{useEffect as C,useState as h}from"react";var A=()=>{let t=r(),[e,n]=h(null);return C(()=>{let o,s=()=>{let m=t.nextAutoResetAt;if(!m){n(null);return}let a=Date.now(),u=Math.max(0,m-a);n(u),u>0&&(o=requestAnimationFrame(s))};s();let c=t.subscribe(()=>{s()});return()=>{c(),o&&cancelAnimationFrame(o)}},[t]),e};export{l as SdkContainer,i as SdkContext,k as useMunchi,A as usePaymentCountdown,D as usePaymentState,w as usePayments,r as useSdk};

package/dist/src/SdkContainer.d.ts

@@ -0,0 +1,16 @@
+import type { FC, ReactNode } from "react";
+import type { IMunchiPaymentSDK } from "@munchi_oy/payments";
+export interface SdkContextType {
+    sdk: IMunchiPaymentSDK;
+}
+export declare const SdkContext: import("react").Context<SdkContextType | undefined>;
+export interface SdkContainerProps {
+    children: ReactNode;
+    sdk: IMunchiPaymentSDK;
+}
+/**
+ * SdkContainer provides the Munchi SDK instances to the application via context.
+ * Works in React and React Native.
+ */
+export declare const SdkContainer: FC<SdkContainerProps>;
+//# sourceMappingURL=SdkContainer.d.ts.map

package/dist/src/SdkContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SdkContainer.d.ts","sourceRoot":"","sources":["../../src/SdkContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAE7D,MAAM,WAAW,cAAc;IAC7B,GAAG,EAAE,iBAAiB,CAAC;CACxB;AAED,eAAO,MAAM,UAAU,qDAAuD,CAAC;AAE/E,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB,GAAG,EAAE,iBAAiB,CAAC;CACxB;AAED;;;GAGG;AACH,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAI9C,CAAC"}

package/dist/src/useMunchi.d.ts

@@ -0,0 +1,19 @@
+import { type SdkContextType } from "./SdkContainer";
+import type { IMunchiPaymentSDK, PaymentInteractionState } from "@munchi_oy/payments";
+/**
+ * Hook to access all Munchi SDK instances.
+ */
+export declare const useMunchi: () => SdkContextType;
+/**
+ * Hook to access the Munchi Payment SDK instance.
+ */
+export declare const useSdk: () => IMunchiPaymentSDK;
+/**
+ * @deprecated Use useSdk instead
+ */
+export declare const usePayments: () => IMunchiPaymentSDK;
+/**
+ * Hook to access the current state of the Payment SDK reactively.
+ */
+export declare const usePaymentState: () => PaymentInteractionState;
+//# sourceMappingURL=useMunchi.d.ts.map

package/dist/src/useMunchi.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMunchi.d.ts","sourceRoot":"","sources":["../../src/useMunchi.ts"],"names":[],"mappings":"AACA,OAAO,EAAc,KAAK,cAAc,EAAE,MAAM,gBAAgB,CAAC;AACjE,OAAO,KAAK,EAAE,iBAAiB,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAEtF;;GAEG;AACH,eAAO,MAAM,SAAS,QAAO,cAM5B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,MAAM,QAAO,iBAGzB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,QARE,iBAQO,CAAC;AAElC;;GAEG;AACH,eAAO,MAAM,eAAe,QAAO,uBAWlC,CAAC"}

package/dist/src/usePaymentCountdown.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Hook that returns the milliseconds remaining until the SDK auto-resets.
+ * Returns null if no auto-reset is scheduled.
+ *
+ * Useful for showing progress bars or countdown timers on Success/Failure screens.
+ */
+export declare const usePaymentCountdown: () => number | null;
+//# sourceMappingURL=usePaymentCountdown.d.ts.map

package/dist/src/usePaymentCountdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePaymentCountdown.d.ts","sourceRoot":"","sources":["../../src/usePaymentCountdown.ts"],"names":[],"mappings":"AAGA;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,qBA0C/B,CAAC"}

package/dist/src/version.d.ts

@@ -0,0 +1,2 @@
+export declare const VERSION = "1.2.5";
+//# sourceMappingURL=version.d.ts.map

package/dist/src/version.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../../src/version.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,OAAO,UAAU,CAAC"}

package/index.ts

@@ -0,0 +1,3 @@
+export * from "./src/SdkContainer";
+export * from "./src/useMunchi";
+export * from "./src/usePaymentCountdown";

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@munchi_oy/react",
+  "version": "1.2.5",
+  "description": "Munchi React SDK - React Context and Hooks for Munchi SDKs",
+  "license": "UNLICENSED",
+  "publishConfig": {
+    "access": "restricted"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "react-native": "index.ts",
+  "files": [
+    "dist",
+    "src",
+    "index.ts",
+    "README.md"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "react-native": "./index.ts"
+    }
+  },
+  "scripts": {
+    "version:sync": "node scripts/sync-version.mjs",
+    "prebuild": "pnpm version:sync",
+    "build:runtime": "tsup",
+    "build:types": "tsc -p tsconfig.build.json",
+    "build": "pnpm run build:runtime && pnpm run build:types",
+    "yalc:publish": "pnpm build && yalc publish --push",
+    "dev": "tsup --watch",
+    "prepare": "npm run build",
+    "prepublishOnly": "pnpm build"
+  },
+  "dependencies": {},
+  "peerDependencies": {
+    "@munchi_oy/core": ">=1.0.0",
+    "@munchi_oy/payments": ">=1.0.0",
+    "react": ">=18.2.0",
+    "react-native": ">=0.76.0"
+  },
+  "peerDependenciesMeta": {
+    "react-native": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@munchi_oy/core": "workspace:*",
+    "@munchi_oy/payments": "workspace:*",
+    "@types/react": "^18.3.0",
+    "react": "^18.3.0",
+    "react-native": "0.76.9",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0"
+  }
+}

package/src/SdkContainer.tsx

@@ -0,0 +1,24 @@
+import type { FC, ReactNode } from "react";
+import { createContext, useMemo } from "react";
+import type { IMunchiPaymentSDK } from "@munchi_oy/payments";
+
+export interface SdkContextType {
+  sdk: IMunchiPaymentSDK;
+}
+
+export const SdkContext = createContext<SdkContextType | undefined>(undefined);
+
+export interface SdkContainerProps {
+  children: ReactNode;
+  sdk: IMunchiPaymentSDK;
+}
+
+/**
+ * SdkContainer provides the Munchi SDK instances to the application via context.
+ * Works in React and React Native.
+ */
+export const SdkContainer: FC<SdkContainerProps> = ({ children, sdk }) => {
+  const value = useMemo(() => ({ sdk }), [sdk]);
+
+  return <SdkContext.Provider value={value}>{children}</SdkContext.Provider>;
+};

package/src/useMunchi.ts

@@ -0,0 +1,43 @@
+import { useContext, useEffect, useState } from "react";
+import { SdkContext, type SdkContextType } from "./SdkContainer";
+import type { IMunchiPaymentSDK, PaymentInteractionState } from "@munchi_oy/payments";
+
+/**
+ * Hook to access all Munchi SDK instances.
+ */
+export const useMunchi = (): SdkContextType => {
+  const context = useContext(SdkContext);
+  if (!context) {
+    throw new Error("useMunchi must be used within a SdkContainer");
+  }
+  return context;
+};
+
+/**
+ * Hook to access the Munchi Payment SDK instance.
+ */
+export const useSdk = (): IMunchiPaymentSDK => {
+  const { sdk } = useMunchi();
+  return sdk;
+};
+
+/**
+ * @deprecated Use useSdk instead
+ */
+export const usePayments = useSdk;
+
+/**
+ * Hook to access the current state of the Payment SDK reactively.
+ */
+export const usePaymentState = (): PaymentInteractionState => {
+  const sdk = useSdk();
+  const [state, setState] = useState(sdk.currentState);
+
+  useEffect(() => {
+    return sdk.subscribe((newState) => {
+      setState(newState);
+    });
+  }, [sdk]);
+
+  return state;
+};

package/src/usePaymentCountdown.ts

@@ -0,0 +1,52 @@
+import { useEffect, useState } from "react";
+import { useSdk } from "./useMunchi";
+
+/**
+ * Hook that returns the milliseconds remaining until the SDK auto-resets.
+ * Returns null if no auto-reset is scheduled.
+ * 
+ * Useful for showing progress bars or countdown timers on Success/Failure screens.
+ */
+export const usePaymentCountdown = () => {
+  const sdk = useSdk();
+  const [timeLeftMs, setTimeLeftMs] = useState<number | null>(null);
+
+  useEffect(() => {
+    let animationFrameId: number;
+
+    const checkTimer = () => {
+      const resetTime = sdk.nextAutoResetAt;
+
+      if (!resetTime) {
+        setTimeLeftMs(null);
+        return;
+      }
+
+      const now = Date.now();
+      const remaining = Math.max(0, resetTime - now);
+      
+      setTimeLeftMs(remaining);
+
+      if (remaining > 0) {
+        animationFrameId = requestAnimationFrame(checkTimer);
+      }
+    };
+
+    // Initial check
+    checkTimer();
+
+    // Subscribe to state changes to trigger re-checks (e.g. when entering SUCCESS state)
+    const unsubscribe = sdk.subscribe(() => {
+      checkTimer();
+    });
+
+    return () => {
+      unsubscribe();
+      if (animationFrameId) {
+        cancelAnimationFrame(animationFrameId);
+      }
+    };
+  }, [sdk]);
+
+  return timeLeftMs;
+};

package/src/version.ts

@@ -0,0 +1,3 @@
+// This file is auto-generated. Do not edit manually.
+// Run 'pnpm version:sync' to update this file.
+export const VERSION = "1.2.5";