esewa-ui-library 1.0.3 → 1.0.5

package/README.md

@@ -108,15 +108,25 @@ export default App;
 
 The `ESewaAlertCard` component is customizable app bar for your eSewa Mini App with support for back, title, and action icons, making navigation and interactions seamless.
 
+Use useESewaDataProvider to set title for appbar. 
+
 ### Usage:
 
 ```tsx
-import { ESewaAppBar } from 'esewa-ui-library';
+import { ESewaAppBar, useESewaDataProvider } from 'esewa-ui-library';
 
 const App = () => {
+  const { updateData } = useESewaDataProvider();
+
+  useEffect(() => {
+      updateData({
+        title: "Merchant Product Form",
+      });
+    }, []);
+
   return (
     <ESewaAppBar 
-      title="App Bar Title" 
+      icon="icon-es-arrow-left"
       titleposition="left"
       onBackIconClick={() => console.log('Back icon clicked')}
       onTitleClick={() => console.log('Title clicked')}
@@ -582,17 +592,19 @@ const App = () => {
     <div>
       <button onClick={openDialog}>Open Dialog</button>
 
-      <ESewaDialog
-        isOpen={isOpen}
-        title="Sample Dialog"
-        okText="Confirm"
-        cancelText="Cancel"
-        onOk={handleOk}
-        onCancel={closeDialog}
-        position="center"
-      >
-        <p>Dialog content goes here.</p>
-      </ESewaDialog>
+      {
+        isOpen && (<ESewaDialog
+          isOpen={isOpen}
+          title="Sample Dialog"
+          okText="Confirm"
+          cancelText="Cancel"
+          onOk={handleOk}
+          onCancel={closeDialog}
+          position="center"
+        >
+          <p>Dialog content goes here.</p>
+        </ESewaDialog>)
+      }
     </div>
   );
 };
@@ -1298,9 +1310,10 @@ The `ESewaRadio` component accepts the following props:
 | `label`     | `string`                       | No       | `undefined`   | The label displayed next to the radio button.                                                     |
 | `name`      | `string`                       | Yes      | N/A           | The name of the radio button, which groups it together with other radio buttons.                  |
 | `onChange`  | `(checked: boolean) => void`   | No       | `undefined`   | Callback function that is triggered when the radio button's checked state changes.               |
-| `checked`   | `boolean`                      | No       | `undefined`   | Determines whether the radio button is selected (`true`) or not (`false`).                       |
+| `checked`   | `boolean`                      | Yes      | false   | Determines whether the radio button is selected (`true`) or not (`false`).                       |
 | `labelClass`| `string`                       | No       | `''`          | A custom class applied to the label element for styling.                                          |
 | `className` | `string`                       | No       | `''`          | A custom class applied to the root wrapper element of the radio button component.                |
+| `disabled`  | `boolean`                      | No       |  false        | Used to disable radio state                                                                 |
 
 # ESewaSanitizeHtml Component
 
@@ -1487,7 +1500,110 @@ export default TooltipExample
 ### Providers
 
 - **ThemeProvider**: `ThemeProvider`
+
+Wrap your component with this provider to apply theme.
+
+```tsx
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { ESewaThemeProvider } from 'esewa-ui-library'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <ESewaThemeProvider>
+        <App />
+    </ESewaThemeProvider>
+  </StrictMode>,
+)
+
+```
+
+In your page
+
+```tsx
+import { useEffect, useState } from "react";
+import {
+  MoonIcon,
+  SunIcon,
+} from "@heroicons/react/24/outline";
+
+const [darkMode, setDarkMode] = useState<boolean>(
+  window.matchMedia('(prefers-color-scheme: dark)').matches
+);
+
+const handleThemeToggle = () => {
+  setDarkMode((prevMode) => !prevMode);
+};
+
+useEffect(() => {
+  const theme = darkMode ? 'dark' : 'light';
+  document.documentElement.setAttribute('data-theme', theme);
+}, [darkMode]);
+
+<button
+  onClick={handleThemeToggle}
+>
+  {darkMode ? (
+    <SunIcon className="h-6 w-6" />
+  ) : (
+    <MoonIcon className="h-6 w-6" />
+  )}
+</button>
+
+```
+
 - **ESewaProvider**: `ESewaProvider`
+
+Wrap your component with this provider.
+
+```tsx
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { ESewaProvider } from 'esewa-ui-library'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <ESewaProvider>
+        <App />
+    </ESewaProvider>
+  </StrictMode>,
+)
+
+```
+
+then you can use useESewaDataProvider
+
+```tsx
+import { ESewaAppBar, useESewaDataProvider } from 'esewa-ui-library';
+
+const App = () => {
+  const { updateData } = useESewaDataProvider();
+
+  useEffect(() => {
+      updateData({
+        title: "Merchant Product Form",
+      });
+    }, []);
+
+  return (
+    <ESewaAppBar 
+      icon="icon-es-arrow-left"
+      titleposition="left"
+      onBackIconClick={() => console.log('Back icon clicked')}
+      onTitleClick={() => console.log('Title clicked')}
+      onActionIconClick={() => console.log('Action icon clicked')}
+      actionIcon="icon-settings"
+    />
+  );
+};
+
+export default App;
+
+```
+
+
 - **ESewaPaymentProvider**: `ESewaPaymentProvider`
 
 # Services
@@ -1504,6 +1620,7 @@ This library provides a set of services that allow interaction between the merch
   - [User Detail Request](#user-detail-request)
   - [Media Access Request](#media-access-request)
   - [Validate Payment](#validate-payment)
+  - [Request Payment](#request-payment)
 - [Error Handling](#error-handling)
 
 ## Initialization
@@ -1693,6 +1810,59 @@ const onValidateTransactionClick = () => {
     requestFromMiniApp(obj, CALLBACK_TYPE_ENUM.VALIDATE_TRANSACTION_CALLBACK, validateTransactionCallBack);
 };
 ```
+#### Request Payment
+Pass token received from initialize request call with respective request type, callback key , your merchant identifier and request payload
+
+```tsx
+const onRequestPaymentClick = () => {
+    const productPayload = {
+        "product_code": "NP-ES-VIANET",
+        "amount": 28.48,
+        "properties": {
+            "productId": "3299",
+            "payment_id": "1613103_PP",
+            "refId": "400005",
+            "customer_id": "48707",
+            "payer": "CUSTOMER"
+        },
+        "channel": "WEB_USER"
+    };
+
+    const obj = {
+      requestType: REQUEST_TYPE_ENUM.REQUEST_PAYMENT,
+      merchant_identifier: 'IAAAAABTOBAbFhAXHhEHAgoXX0FRR1FJJiw3LCwkJzE=',
+      token: sessionStorage.getItem('miniAppAuthToken'),
+      data: productPayload,
+      callbackKey: "REQUEST_PAYMENT_CALLBACK"
+    };
+
+    const requestPaymentCallBack: any = (data:any) => {
+      console.log("Make payment Response:", data);
+
+      try {
+        if (!data) {
+          throw new Error('Received null or undefined response');
+        }
+        const res = JSON.parse(data);
+
+        if (!res || typeof res !== 'object') {
+          throw new Error('Parsed response is not a valid object');
+        }
+
+        if (res?.error_message) {
+          throw new Error('Error res', res.error_message);
+        }
+
+        setMakePaymentRes(res);
+      } catch (error) {
+        console.error('Error parsing response:', error);
+      }
+    };
+
+    requestFromMiniApp(obj, CALLBACK_TYPE_ENUM.REQUEST_PAYMENT_CALLBACK, requestPaymentCallBack);
+};
+```
+
 ## Error Handling
 
 Errors are returned as JSON responses with an `error_message` field.

package/dist/@types/index.d.ts

@@ -46,16 +46,19 @@ declare global {
             VALIDATE_TRANSACTION_CALLBACK?: Callback | null;
         };
         webkit: {
-            requestApp: (data: any) => void;
-            receiveFromApp: (data: any) => void;
             messageHandlers: {
                 iOSNative: {
-                    requestApp: (data: any) => void;
+                    postMessage: (data: any) => void;
+                    INIT_APP_CALLBACK?: Callback | null;
+                    REQUEST_PAYMENT_CALLBACK?: Callback | null;
+                    USER_DETAIL_ACCESS_CALLBACK?: Callback | null;
+                    MEDIA_ACCESS_CALLBACK?: Callback | null;
+                    LOCATION_ACCESS_CALLBACK?: Callback | null;
+                    VALIDATE_TRANSACTION_CALLBACK?: Callback | null;
                 };
             };
-            receiveDataFromWeb: (data: any) => void;
-            receiveDataFromApp: (data: any) => void;
         };
     }
     function getDataFromMiniApp(e: any): void;
 }
+export declare type CallbackKey = keyof Window['Android'] | 'INIT_APP_CALLBACK' | 'REQUEST_PAYMENT_CALLBACK' | 'USER_DETAIL_ACCESS_CALLBACK' | 'MEDIA_ACCESS_CALLBACK' | 'LOCATION_ACCESS_CALLBACK' | 'VALIDATE_TRANSACTION_CALLBACK';

package/dist/components/Radio/eSewaRadio.d.ts

@@ -1,12 +1,14 @@
 import React from 'react';
 declare type RadioProps = {
-    key: any;
+    key?: any;
     label?: string;
+    value?: any;
     name: string;
-    onChange?: (checked: any) => void;
-    checked?: boolean;
+    onChange?: (value: any, checked: boolean) => void;
+    checked: boolean;
     labelClass?: string;
     className?: string;
+    disabled?: boolean;
 };
 export declare const ESewaRadio: React.FC<RadioProps>;
 export default ESewaRadio;

package/dist/index.js

@@ -186,7 +186,7 @@ var StyledAppBar = styled__default.header.attrs(function (_ref) {
   return {
     titleposition: titleposition
   };
-})(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteralLoose(["\n  .e-app-bar {\n    display: flex;\n    justify-content: space-between;\n    flex-direction: row;\n    align-items: center;\n    background-color: var(--appbar-bg-top);\n    padding: 7px 12px;\n    position: fixed;\n    height: 42px;\n    left: 0;\n    right: 0;\n    gap: var(--values-value-8);\n\n    &--nav-icon, &--close-icon {\n      padding: 7px;\n      color: var(--white);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    /* Title section */\n    &--title-wrapper {\n      display: flex;\n      justify-content: ", ";\n      align-items: center;\n      width: 100%;  // Ensures the title section takes full width to apply the alignment\n    }\n\n    &--title {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      overflow: hidden;\n      // display: -webkit-box;\n      // -webkit-line-clamp: 1;\n      // line-clamp: 1;\n      // -webkit-box-orient: vertical;\n    }\n\n    &--title-image img {\n      width: 32px;\n      object-fit: cover;\n      // margin-left: -32px;\n      background: var(--white);\n      border: 1px solid var(--border);\n      border-radius: var(--grid-borderradius-border-radius-xs);\n    }\n\n    &--title-label {\n      color: var(--white);\n      letter-spacing: 0.4px;\n      font-size: var(--values-value-16);\n      font-weight: 500;\n    }\n  }\n"])), function (props) {
+})(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n\n  .e-app-bar {\n    display: flex;\n    justify-content: space-between;\n    flex-direction: row;\n    align-items: center;\n    background-color: var(--appbar-bg-top);\n    padding: 7px 12px;\n    position: relative;\n    height: 42px;\n    // left: 0;\n    // right: 0;\n    gap: var(--values-value-8);\n\n    &--nav-icon, &--close-icon {\n      padding: 7px;\n      color: var(--white);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    /* Title section */\n    &--title-wrapper {\n      display: flex;\n      justify-content: ", ";\n      align-items: center;\n      width: 100%;  // Ensures the title section takes full width to apply the alignment\n    }\n\n    &--title {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      overflow: hidden;\n      // display: -webkit-box;\n      // -webkit-line-clamp: 1;\n      // line-clamp: 1;\n      // -webkit-box-orient: vertical;\n    }\n\n    &--title-image img {\n      width: 32px;\n      object-fit: cover;\n      // margin-left: -32px;\n      background: var(--white);\n      border: 1px solid var(--border);\n      border-radius: var(--grid-borderradius-border-radius-xs);\n    }\n\n    &--title-label {\n      color: var(--white);\n      letter-spacing: 0.4px;\n      font-size: var(--values-value-16);\n      font-weight: 500;\n    }\n  }\n"])), function (props) {
   return props.titleposition === 'left' ? 'flex-start' : props.titleposition === 'right' ? 'flex-end' : 'center';
 });
 var ESewaAppBar = function ESewaAppBar(_ref2) {
@@ -7083,18 +7083,22 @@ var EsewaFullPageLoadingScreen = function EsewaFullPageLoadingScreen(_ref) {
 };
 
 var _templateObject$l;
-var StyledRadio = styled__default.div(_templateObject$l || (_templateObject$l = _taggedTemplateLiteralLoose(["\n  .container{\n    display:flex;\n    align-items: center;\n    gap: 8px;\n  }\n\n  .container input[type=\"radio\" i] {\n    margin: 0;\n    appearance: none;\n    width: 16px;\n    height: 16px;\n    border: 2px solid var(--secondary);\n    border-radius: 50%;\n    position: relative;\n    cursor: pointer;\n    transition: border-color 0.3s ease;\n  }\n\n   .container input[type=\"radio\"]:checked {\n    border-color: var(--primary);\n  }\n\n  .container input[type=\"radio\"]::before {\n    content: '';\n    width: 10px;\n    height: 10px;\n    background-color: transparent;\n    border-radius: 50%;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    transition: background-color 0.3s ease;\n  }\n\n  .container input[type=\"radio\"]:checked::before {\n    background-color: var(--primary);\n  }\n"])));
+var StyledRadio = styled__default.div(_templateObject$l || (_templateObject$l = _taggedTemplateLiteralLoose(["\n  .container{\n    display:flex;\n    align-items: center;\n    gap: 8px;\n  }\n\n  .container input[type=\"radio\" i] {\n    margin: 0;\n    appearance: none;\n    width: 16px;\n    height: 16px;\n    border: 2px solid var(--secondary);\n    border-radius: 50%;\n    position: relative;\n    cursor: pointer;\n    transition: border-color 0.3s ease;\n  }\n\n   .container input[type=\"radio\"]:checked {\n    border-color: var(--primary);\n  }\n\n  .container input[type=\"radio\"]::before {\n    content: '';\n    width: 10px;\n    height: 10px;\n    background-color: transparent;\n    border-radius: 50%;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    transition: background-color 0.3s ease;\n  }\n\n  .container input[type=\"radio\"]:checked::before {\n    background-color: var(--primary);\n  }\n\n  .container input[type=\"radio\"]:disabled {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n"])));
 var ESewaRadio = function ESewaRadio(_ref) {
   var label = _ref.label,
+    value = _ref.value,
     name = _ref.name,
     className = _ref.className,
     _ref$labelClass = _ref.labelClass,
     labelClass = _ref$labelClass === void 0 ? '' : _ref$labelClass,
     onChange = _ref.onChange,
-    checked = _ref.checked;
+    _ref$checked = _ref.checked,
+    checked = _ref$checked === void 0 ? false : _ref$checked,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
   var handleRadioChange = function handleRadioChange(e) {
-    if (onChange) {
-      onChange(e.target.checked);
+    if (onChange && !disabled) {
+      onChange(value, e.target.checked);
     }
   };
   return React__default.createElement(StyledRadio, null, React__default.createElement("div", {
@@ -7104,8 +7108,10 @@ var ESewaRadio = function ESewaRadio(_ref) {
   }, React__default.createElement("input", {
     type: 'radio',
     name: name,
+    value: value,
     checked: checked,
-    onChange: handleRadioChange
+    onChange: handleRadioChange,
+    disabled: disabled
   }), React__default.createElement("span", {
     className: "" + labelClass
   }, label))));
@@ -7683,7 +7689,7 @@ var CONNECT_APP = function CONNECT_APP(data) {
   if (isiOS) {
     var _window$webkit;
     if ((_window$webkit = window.webkit) !== null && _window$webkit !== void 0 && _window$webkit.messageHandlers.iOSNative) {
-      window.webkit.messageHandlers.iOSNative.requestApp(data);
+      window.webkit.messageHandlers.iOSNative.postMessage(data);
     } else {
       console.warn('iOS interface not available');
     }
@@ -7694,8 +7700,7 @@ var requestFromMiniApp = function requestFromMiniApp(data, callbackKey, callback
   if (window.Android) {
     window.Android[callbackKey] = callback;
   } else if ((_window$webkit2 = window.webkit) !== null && _window$webkit2 !== void 0 && (_window$webkit2$messa = _window$webkit2.messageHandlers) !== null && _window$webkit2$messa !== void 0 && _window$webkit2$messa.iOSNative) {
-    window.miniAppResponse = window.miniAppResponse || {};
-    window.miniAppResponse[callbackKey] = callback;
+    window.webkit.messageHandlers.iOSNative[callbackKey] = callback;
   }
   CONNECT_APP(JSON.stringify(data));
 };
@@ -7865,11 +7870,13 @@ var useDebounce = function useDebounce(value, delay) {
 };
 
 var loadGoogleFont = function loadGoogleFont() {
-  if (!document.querySelector("link[href*='Source+Sans+Pro']")) {
-    var link = document.createElement('link');
-    link.href = 'https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600;700&display=swap';
-    link.rel = 'stylesheet';
-    document.head.appendChild(link);
+  if (typeof window !== 'undefined' && document) {
+    if (!document.querySelector("link[href*='Source+Sans+Pro']")) {
+      var link = document.createElement('link');
+      link.href = 'https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600;700&display=swap';
+      link.rel = 'stylesheet';
+      document.head.appendChild(link);
+    }
   }
 };
 loadGoogleFont();