payout-widget - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

lib/cjs/assets/icons.d.ts

 import React from "react";
 export declare function ExchangeRateArrow(): React.JSX.Element;
+export declare const Info: ({ size, mode }: {
+    size?: number | undefined;
+    mode?: "dark" | "light" | undefined;
+}) => React.JSX.Element;

lib/cjs/assets/icons.js

@@ -6,3 +6,3 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ExchangeRateArrow = void 0;
+exports.Info = exports.ExchangeRateArrow = void 0;
 var react_1 = __importDefault(require("react"));
@@ -14,1 +14,9 @@ function ExchangeRateArrow() {
 exports.ExchangeRateArrow = ExchangeRateArrow;
+var Info = function (_a) {
+    var size = _a.size, mode = _a.mode;
+    return (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: size !== null && size !== void 0 ? size : '24', height: size !== null && size !== void 0 ? size : '24', viewBox: "0 0 24 24", fill: "none", stroke: mode === 'dark' ? 'rgba(254, 211, 154, 1)' : 'rgba(254, 145, 2, 1)', strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" },
+        react_1.default.createElement("circle", { cx: "12", cy: "12", r: "10" }),
+        react_1.default.createElement("line", { x1: "12", x2: "12", y1: "8", y2: "12" }),
+        react_1.default.createElement("line", { x1: "12", x2: "12.01", y1: "16", y2: "16" })));
+};
+exports.Info = Info;

lib/cjs/components/button/index.d.ts

 import React, { ReactNode, DetailedHTMLProps } from "react";
 import { ButtonHTMLAttributes } from "react";
 import "./index.css";
+import { Mode } from "../../types";
 export interface ButtonProps extends DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
@@ -10,3 +11,3 @@ iconLeft?: ReactNode;
     variant?: "primary" | "secondary";
-    mode?: "dark" | "light";
+    mode?: Mode;
     disabled?: boolean;
@@ -13,0 +14,0 @@ loading?: boolean;

lib/cjs/components/data-display/details-row/index.d.ts

 import React, { ReactNode } from "react";
 import "./index.css";
+import { Mode } from "../../../types";
 type AmountType = {
@@ -41,5 +42,5 @@ label: string;
      */
-    mode?: "dark" | "light";
+    mode?: Mode;
 };
 declare function DetailsRow({ text, amount, exchangeRate, status, custom, shouldIncludeBorderBottom, shouldIncludeBorderTop, isMobile, mode, }: DetailsRowProps): React.JSX.Element;
 export default DetailsRow;

lib/cjs/components/inputs/text-input/index.d.ts

 import React, { ReactNode } from "react";
 import { InputProps } from "antd/lib/input";
+import { Rule } from "antd/lib/form";
 import "./index.css";
+import { Mode } from "../../../types";
 declare const TextInput: React.ForwardRefExoticComponent<InputProps & {
@@ -12,7 +14,7 @@ /**
      */
-    rules?: any[] | undefined;
+    rules?: Rule[] | undefined;
     /**
      * renders in dark or light mode
      */
-    mode?: "dark" | "light" | undefined;
+    mode?: Mode;
     /**
@@ -19,0 +21,0 @@ * Initial value

lib/cjs/components/status/index.d.ts

 import React, { ReactNode } from "react";
 import "./index.css";
+import { Mode } from "../../types";
 export type StatusTagProps = {
@@ -15,5 +16,5 @@ /**
      */
-    mode?: "dark" | "light";
+    mode?: Mode;
 };
 declare function Status({ name, color, mode }: StatusTagProps): React.JSX.Element;
 export default Status;

lib/cjs/components/wizard-inputs/wizard-amount-input/index.d.ts

 import { InputNumberProps } from "antd/lib/input-number";
 import { SelectProps } from "antd/lib/select";
+import { Rule } from "antd/lib/form";
 import React, { CSSProperties, ReactNode } from "react";
 import "../wizard-select.css";
 import "./index.css";
+import { Mode } from "../../../types";
 type WizardAmountProps = {
@@ -17,3 +19,3 @@ currency: SelectProps & {
         name?: string;
-        rules?: any[];
+        rules?: Rule[];
         /**
@@ -29,3 +31,3 @@ * Initial value
         name?: string;
-        rules?: any[];
+        rules?: Rule[];
         /**
@@ -43,3 +45,3 @@ * Initial value
      */
-    mode?: "dark" | "light";
+    mode?: Mode;
     /**
@@ -46,0 +48,0 @@ * input height (works only for textarea)

lib/cjs/components/wizard-inputs/wizard-amount-input/index.js

@@ -40,3 +40,3 @@ "use strict";
     var _b;
-    var amount = _a.amount, label = _a.label, mode = _a.mode, height = _a.height, containerStyle = _a.containerStyle, _c = _a.currency, options = _c.options, currency = __rest(_c, ["options"]);
+    var amount = _a.amount, _c = _a.label, label = _c === void 0 ? "Amount" : _c, mode = _a.mode, height = _a.height, containerStyle = _a.containerStyle, _d = _a.currency, options = _d.options, currency = __rest(_d, ["options"]);
     var form = form_1.default.useFormInstance();
@@ -70,4 +70,4 @@ // @ts-ignore
         react_1.default.createElement("div", { className: "inputs" },
-            react_1.default.createElement(form_1.default.Item, { noStyle: true, name: (amount === null || amount === void 0 ? void 0 : amount.name) || "amount", rules: amount === null || amount === void 0 ? void 0 : amount.rules, initialValue: amount === null || amount === void 0 ? void 0 : amount.initialValue },
-                react_1.default.createElement(input_number_1.default, __assign({ placeholder: (amount === null || amount === void 0 ? void 0 : amount.placeholder) || "Enter Amount", addonBefore: react_1.default.createElement(CurrencySelector, null), formatter: function (value) {
+            react_1.default.createElement(form_1.default.Item, { name: (amount === null || amount === void 0 ? void 0 : amount.name) || "amount", rules: amount === null || amount === void 0 ? void 0 : amount.rules, initialValue: amount === null || amount === void 0 ? void 0 : amount.initialValue },
+                react_1.default.createElement(input_number_1.default, { placeholder: (amount === null || amount === void 0 ? void 0 : amount.placeholder) || "Enter Amount", addonBefore: react_1.default.createElement(CurrencySelector, null), formatter: function (value) {
                         return (0, react_currency_input_field_1.formatValue)({
@@ -84,4 +84,4 @@ value: (value === null || value === void 0 ? void 0 : value.toString()) || "",
                         });
-                    }, id: amountName }, amount))))));
+                    }, id: amountName })))));
 };
 exports.default = WizardAmountInput;

lib/cjs/components/wizard-inputs/wizard-phone-input/index.d.ts

 import React, { CSSProperties, ReactNode } from "react";
+import { Rule } from "antd/lib/form";
 import { PhoneInputProps } from "react-phone-input-2";
@@ -6,2 +7,3 @@ import "react-phone-input-2/lib/style.css";
 import "./index.css";
+import { Mode } from "../../../types";
 type WizardPhoneProps = PhoneInputProps & {
@@ -13,2 +15,6 @@ /**
     /**
+     * extra content to be placed on roght side of the label
+     */
+    extra?: ReactNode;
+    /**
      * Input name
@@ -20,7 +26,7 @@ */
      */
-    rules?: any[];
+    rules?: Rule[];
     /**
      * renders in dark or light mode
      */
-    mode?: "dark" | "light";
+    mode?: Mode;
     /**
@@ -39,3 +45,3 @@ * Initial value
 };
-declare const WizardPhoneInput: ({ label, containerStyle, height, rules, mode, name, initialValue, ...props }: WizardPhoneProps) => React.JSX.Element;
+declare const WizardPhoneInput: ({ label, containerStyle, height, rules, mode, name, initialValue, extra, ...props }: WizardPhoneProps) => React.JSX.Element;
 export default WizardPhoneInput;

lib/cjs/components/wizard-inputs/wizard-phone-input/index.js

@@ -36,3 +36,3 @@ "use strict";
     var _b;
-    var label = _a.label, containerStyle = _a.containerStyle, height = _a.height, rules = _a.rules, mode = _a.mode, name = _a.name, initialValue = _a.initialValue, props = __rest(_a, ["label", "containerStyle", "height", "rules", "mode", "name", "initialValue"]);
+    var label = _a.label, containerStyle = _a.containerStyle, height = _a.height, rules = _a.rules, mode = _a.mode, name = _a.name, initialValue = _a.initialValue, extra = _a.extra, props = __rest(_a, ["label", "containerStyle", "height", "rules", "mode", "name", "initialValue", "extra"]);
     var form = form_1.default.useFormInstance();
@@ -44,9 +44,27 @@ // @ts-ignore
     };
-    return (react_1.default.createElement(form_1.default.Item, { label: label, style: __assign(__assign({}, styles), containerStyle), rules: rules, className: "".concat(mode || "", " clickpesa-wizard-input mobile"), name: name, initialValue: initialValue },
-        react_1.default.createElement(react_phone_input_2_1.default, { onlyCountries: props.onlyCountries, enableSearch: props.enableSearch, disableSearchIcon: true, specialLabel: "", placeholder: props.placeholder, containerClass: "tel-input ".concat(mode), inputStyle: __assign({ width: "100%", fontSize: 14, color: "#575962", fontFamily: "Soleil,'sans-serif'" }, props.inputStyle), inputProps: __assign({ id: (formName || "") + (formName ? "_" : "") + (name || "phoneNumber") }, props.inputProps), dropdownStyle: {
-                fontSize: 14,
-                color: "#575962",
-                fontFamily: "Soleil,'sans-serif'",
-            } })));
+    return (react_1.default.createElement("div", { style: {
+            position: "relative",
+        } },
+        react_1.default.createElement(form_1.default.Item, { label: label, style: __assign(__assign({}, styles), containerStyle), rules: rules, className: "".concat(mode || "", " clickpesa-wizard-input mobile"), name: name, initialValue: initialValue },
+            react_1.default.createElement(react_phone_input_2_1.default, { onlyCountries: props.onlyCountries, enableSearch: props.enableSearch, disableSearchIcon: true, specialLabel: "", placeholder: props.placeholder, containerClass: "tel-input ".concat(mode || ""), inputStyle: __assign({ width: "100%", height: "100%", fontSize: 14, color: "#575962", fontFamily: "inherit" }, props.inputStyle), inputProps: __assign({ id: (formName || "") +
+                        (formName ? "_" : "") +
+                        (name || "phoneNumber") }, props.inputProps), dropdownStyle: {
+                    fontSize: 14,
+                    color: "#575962",
+                    fontFamily: "Soleil,'sans-serif'",
+                } })),
+        extra && (react_1.default.createElement("div", { style: {
+                position: "absolute",
+                top: "8px",
+                height: "32px",
+                right: "8px",
+                borderTopRightRadius: "8px",
+                borderBottomRightRadius: "8px",
+                background: mode === "dark" ? "#363E43" : "#F3F4F6",
+                padding: ".2rem 1rem",
+                display: "flex",
+                justifyContent: "flex-end",
+                alignItems: "center",
+            } }, extra))));
 };
 exports.default = WizardPhoneInput;

lib/cjs/components/wizard-inputs/wizard-select-input/index.d.ts

 import React, { CSSProperties, ReactNode } from "react";
 import { SelectProps } from "antd/lib/select";
+import { Rule } from "antd/lib/form";
 import "../index.css";
 import "../wizard-select.css";
 import "./index.css";
+import { Mode } from "../../../types";
 type WizardSelectProps = SelectProps & {
@@ -18,7 +20,7 @@ /**
      */
-    rules?: any[];
+    rules?: Rule[];
     /**
      * renders in dark or light mode
      */
-    theme?: "dark" | "light";
+    theme?: Mode;
     /**
@@ -25,0 +27,0 @@ * Initial value

lib/cjs/components/wizard-inputs/wizard-text-input/index.d.ts

 import React, { ReactNode } from "react";
 import { CSSProperties } from "react";
 import { InputProps } from "antd/lib/input";
+import { Rule } from "antd/lib/form";
 import "../index.css";
 import "./index.css";
+import { Mode } from "../../../types";
 type WizardInputProps = InputProps & {
@@ -12,9 +14,13 @@ /**
     /**
+     * extra content to be placed on roght side of the label
+     */
+    extra?: ReactNode;
+    /**
      * Validation rules
      */
-    rules?: any[];
+    rules?: Rule[];
     /**
      * renders in dark or light mode
      */
-    mode?: "dark" | "light";
+    mode?: Mode;
     /**
@@ -37,3 +43,3 @@ * Initial value
 };
-declare function WizardTextInput({ label, type, rules, name, height, mode, initialValue, textarea, containerStyle, ...props }: WizardInputProps): React.JSX.Element;
+declare function WizardTextInput({ label, type, rules, name, height, mode, initialValue, textarea, containerStyle, extra, ...props }: WizardInputProps): React.JSX.Element;
 export default WizardTextInput;

lib/cjs/components/wizard-inputs/wizard-text-input/index.js

@@ -34,3 +34,3 @@ "use strict";
 function WizardTextInput(_a) {
-    var label = _a.label, type = _a.type, rules = _a.rules, name = _a.name, height = _a.height, mode = _a.mode, initialValue = _a.initialValue, textarea = _a.textarea, containerStyle = _a.containerStyle, props = __rest(_a, ["label", "type", "rules", "name", "height", "mode", "initialValue", "textarea", "containerStyle"]);
+    var label = _a.label, type = _a.type, rules = _a.rules, name = _a.name, height = _a.height, mode = _a.mode, initialValue = _a.initialValue, textarea = _a.textarea, containerStyle = _a.containerStyle, extra = _a.extra, props = __rest(_a, ["label", "type", "rules", "name", "height", "mode", "initialValue", "textarea", "containerStyle", "extra"]);
     var styles = {
@@ -43,5 +43,20 @@ "--wizard-input-height": height && textarea ? height + "px" : textarea ? "60px" : "39px",
     }
-    return (react_1.default.createElement(form_1.default.Item, { label: label, style: __assign(__assign({}, styles), containerStyle), rules: rules, className: "".concat(mode || "", " clickpesa-wizard-input mobile"), name: name, initialValue: initialValue },
-        react_1.default.createElement(input_1.default, __assign({ type: type }, props))));
+    return (react_1.default.createElement("div", { style: {
+            position: "relative",
+        } },
+        react_1.default.createElement(form_1.default.Item, { label: label, style: __assign(__assign({}, styles), containerStyle), rules: rules, className: "".concat(mode || "", " clickpesa-wizard-input mobile"), name: name, initialValue: initialValue },
+            react_1.default.createElement(input_1.default, __assign({ type: type }, props))),
+        extra && (react_1.default.createElement("div", { style: {
+                position: "absolute",
+                top: "1px",
+                height: "32px",
+                right: "1px",
+                borderTopRightRadius: "8px",
+                background: mode === "dark" ? "#363E43" : "#F3F4F6",
+                padding: ".2rem 1rem",
+                display: "flex",
+                justifyContent: "flex-end",
+                alignItems: "center",
+            } }, extra))));
 }
 exports.default = WizardTextInput;

lib/cjs/index.d.ts

@@ -1,12 +0,21 @@
-import { FC } from "react";
+import React from "react";
+import "./index.css";
+import { Mode, PayoutCallBackData } from "./types";
 interface PayoutWidgetProps {
     token?: string;
-    clientId?: string;
+    clientId: string;
     theme?: {
         primaryColor?: string;
         fontFamily?: string;
-        mode?: "dark" | "light";
+        mode?: Mode;
     };
+    payoutDetails?: {
+        amount?: number;
+        orderReference?: string;
+        channel?: "BANK" | "MOBILE MONEY";
+    };
+    environment?: "staging" | "production";
+    close?: (payout: PayoutCallBackData) => void;
 }
-declare const PayoutWidget: FC<PayoutWidgetProps>;
+declare const PayoutWidget: ({ theme, payoutDetails, token, clientId, environment, close, }: PayoutWidgetProps) => React.JSX.Element;
 export default PayoutWidget;

lib/cjs/index.js

 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
@@ -6,15 +40,15 @@ return (mod && mod.__esModule) ? mod : { "default": mod };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var button_1 = __importDefault(require("./components/button"));
-var form_1 = __importDefault(require("antd/lib/form"));
-var wizard_text_input_1 = __importDefault(require("./components/wizard-inputs/wizard-text-input"));
-var wizard_select_input_1 = __importDefault(require("./components/wizard-inputs/wizard-select-input"));
-var wizard_phone_input_1 = __importDefault(require("./components/wizard-inputs/wizard-phone-input"));
-var wizard_amount_input_1 = __importDefault(require("./components/wizard-inputs/wizard-amount-input"));
-var currencies_1 = require("./data/currencies");
-var details_row_1 = __importDefault(require("./components/data-display/details-row"));
+var react_1 = __importStar(require("react"));
+var react_query_1 = require("react-query");
+require("./index.css");
+var use_container_size_1 = require("./hooks/use-container-size");
+var app_1 = __importDefault(require("./app"));
+var constants_1 = __importDefault(require("./context/constants"));
+var constants_2 = require("./constants");
+var api_1 = __importStar(require("./config/api"));
+var queryClient = new react_query_1.QueryClient();
 var PayoutWidget = function (_a) {
-    var theme = _a.theme;
-    var form = form_1.default.useForm()[0];
-    form_1.default.useWatch(["test"], form);
+    var theme = _a.theme, payoutDetails = _a.payoutDetails, _b = _a.token, token = _b === void 0 ? "" : _b, _c = _a.clientId, clientId = _c === void 0 ? "" : _c, _d = _a.environment, environment = _d === void 0 ? "production" : _d, close = _a.close;
+    var containerRef = (0, react_1.useRef)(null);
+    var _e = (0, use_container_size_1.useContainerSize)(containerRef);
     var primaryColor = (theme === null || theme === void 0 ? void 0 : theme.primaryColor) || "#FDDC01";
@@ -25,39 +59,41 @@ var styles = {
     };
-    return (react_1.default.createElement("div", { style: styles },
-        react_1.default.createElement(form_1.default, { form: form, name: ((theme === null || theme === void 0 ? void 0 : theme.mode) || "") + "form", onFinish: function (values) {
-                console.log(values, "values");
-            }, initialValues: {
-                test: "Test",
-                password: "password",
-                xtx: "255655",
-                channel: "TEST",
-                amount: "10000",
-                currency: "TZS",
+    if (!clientId.trim()) {
+        return react_1.default.createElement("div", null, "Client ID is not provided");
+    }
+    (0, react_1.useEffect)(function () {
+        if (environment && clientId) {
+            var API_URL = environment === constants_2.PRODUCTION
+                ? "https://api.clickpesa.com"
+                : "https://sandbox.clickpesa.com";
+            var AUTH_API_URL = environment === constants_2.PRODUCTION
+                ? "https://authentication.clickpesa.com"
+                : "https://develop.authentication.clickpesa.com";
+            api_1.default.defaults.baseURL = API_URL + "/third-parties";
+            // coreApi.defaults.headers.clientId = clientId;
+            api_1.authApi.defaults.baseURL = AUTH_API_URL + "/2fa";
+        }
+    }, [environment, clientId]);
+    return (react_1.default.createElement(react_query_1.QueryClientProvider, { client: queryClient },
+        react_1.default.createElement(constants_1.default, { initialState: {
+                token: token,
+                environment: environment,
+                clientId: clientId,
+                mode: theme === null || theme === void 0 ? void 0 : theme.mode,
+                API_URL: environment === constants_2.PRODUCTION
+                    ? "https://api.clickpesa.com"
+                    : "https://sandbox.clickpesa.com",
+                AUTH_URL: environment === constants_2.PRODUCTION
+                    ? "https://authentication.clickpesa.com"
+                    : "https://develop.authentication.clickpesa.com",
+                AWS_REGION: "us-east-2",
+                AWS_USER_POOL_ID: environment === constants_2.PRODUCTION
+                    ? "us-east-2_aR0hfwOMa"
+                    : "us-east-2_BEIfBrod3",
+                AWS_USER_POOL_WEB_CLIENT_ID: environment === constants_2.PRODUCTION
+                    ? "5k0nkk6oku523smvt96rggt73g"
+                    : "1n7nj7prghlcdp8bb2p51v2m1t",
             } },
-            react_1.default.createElement(wizard_text_input_1.default, { name: "test", label: "Name", placeholder: "test", mode: theme === null || theme === void 0 ? void 0 : theme.mode }),
-            react_1.default.createElement(wizard_amount_input_1.default, { currency: {
-                    options: currencies_1.currencies,
-                }, label: "Amount", mode: theme === null || theme === void 0 ? void 0 : theme.mode }),
-            react_1.default.createElement(wizard_text_input_1.default, { textarea: true, label: "Textarea", name: "carres", mode: theme === null || theme === void 0 ? void 0 : theme.mode, placeholder: "Helo" }),
-            react_1.default.createElement(wizard_select_input_1.default, { options: [
-                    {
-                        label: "TEST",
-                        value: "TEST",
-                    },
-                ], name: "channel", theme: theme === null || theme === void 0 ? void 0 : theme.mode, label: "Channel", placeholder: "Select Channel" }),
-            react_1.default.createElement(wizard_phone_input_1.default, { name: "xtx", label: "Phone Number", mode: theme === null || theme === void 0 ? void 0 : theme.mode }),
-            react_1.default.createElement(button_1.default, null, "Submit")),
-        react_1.default.createElement("br", null),
-        react_1.default.createElement("div", null,
-            react_1.default.createElement(details_row_1.default, { status: {
-                    label: "Test",
-                    color: "blue",
-                    name: form.getFieldValue("test"),
-                }, mode: theme === null || theme === void 0 ? void 0 : theme.mode }),
-            react_1.default.createElement(details_row_1.default, { text: {
-                    type: "date",
-                    label: "Date",
-                    value: new Date().toISOString(),
-                }, mode: theme === null || theme === void 0 ? void 0 : theme.mode }))));
+            react_1.default.createElement("div", { style: __assign({}, styles), ref: containerRef, className: "clickpesa-payout-widget ".concat((theme === null || theme === void 0 ? void 0 : theme.mode) || "") },
+                react_1.default.createElement(app_1.default, { payoutDetails: payoutDetails, theme: theme, close: close })))));
 };
 exports.default = PayoutWidget;

lib/cjs/utils/index.d.ts

@@ -0,2 +1,8 @@
+import { DataToSubmit, PayoutPayload } from "../types";
 export declare const formatAmount: (value: any, digits?: number, minDigits?: number) => string;
 export declare const formatDate: (value: any) => string;
+export declare const delay: (ms: number) => Promise<unknown>;
+export declare const formatErrorMessage: (error: any) => string;
+export declare const formatPhoneNumber: (phone: string) => string;
+export declare const payoutDeliveryTime: (method: "BANK TRANSFER" | "MOBILE MONEY", settlementType?: "RTGS" | "ACH") => "Instant" | "1 Working Day" | "Same Day" | "N/A";
+export declare const formatDataToSubmit: (values: DataToSubmit) => PayoutPayload;

lib/cjs/utils/index.js

 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
@@ -6,3 +17,3 @@ return (mod && mod.__esModule) ? mod : { "default": mod };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.formatDate = exports.formatAmount = void 0;
+exports.formatDataToSubmit = exports.payoutDeliveryTime = exports.formatPhoneNumber = exports.formatErrorMessage = exports.delay = exports.formatDate = exports.formatAmount = void 0;
 var dayjs_1 = __importDefault(require("dayjs"));
@@ -20,1 +31,51 @@ var formatAmount = function (value, digits, minDigits) {
 exports.formatDate = formatDate;
+var delay = function (ms) { return new Promise(function (res) { return setTimeout(res, ms); }); };
+exports.delay = delay;
+var formatErrorMessage = function (error) {
+    var _a, _b, _c;
+    return (((_b = (_a = error === null || error === void 0 ? void 0 : error.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.message) || ((_c = error === null || error === void 0 ? void 0 : error.response) === null || _c === void 0 ? void 0 : _c.data) || (error === null || error === void 0 ? void 0 : error.message));
+};
+exports.formatErrorMessage = formatErrorMessage;
+var formatPhoneNumber = function (phone) {
+    return phone === null || phone === void 0 ? void 0 : phone.replace(/(\d{3})(\d{3})(\d{3})(\d{3})/, "$1 $2 $3 $4");
+};
+exports.formatPhoneNumber = formatPhoneNumber;
+var payoutDeliveryTime = function (method, settlementType) {
+    if (method === "MOBILE MONEY") {
+        return "Instant";
+    }
+    if (method === "BANK TRANSFER") {
+        if (settlementType === "ACH") {
+            return "1 Working Day";
+        }
+        if (settlementType === "RTGS") {
+            return "Same Day";
+        }
+    }
+    return "N/A";
+};
+exports.payoutDeliveryTime = payoutDeliveryTime;
+var formatDataToSubmit = function (values) {
+    return __assign({ amount: values === null || values === void 0 ? void 0 : values.amount, currency: values === null || values === void 0 ? void 0 : values.currency, payout_info: {
+            currency: values === null || values === void 0 ? void 0 : values.currency,
+            payout_address: values === null || values === void 0 ? void 0 : values.payout_address,
+            payout_address_name: values === null || values === void 0 ? void 0 : values.payout_address_name,
+            payout_channel: values === null || values === void 0 ? void 0 : values.channel,
+            payout_channel_provider: values === null || values === void 0 ? void 0 : values.channel_provider,
+            settlement_type: values === null || values === void 0 ? void 0 : values.settlementType,
+            confirmation_notification: {
+                recipient_mobile: values === null || values === void 0 ? void 0 : values.phone,
+                recipient_email: values === null || values === void 0 ? void 0 : values.email,
+                message: values === null || values === void 0 ? void 0 : values.message,
+            },
+        } }, ((values === null || values === void 0 ? void 0 : values["order.reference_id"])
+        ? {
+            order: {
+                reference_id: values === null || values === void 0 ? void 0 : values["order.reference_id"],
+                amount: values === null || values === void 0 ? void 0 : values.amount,
+                currency: values === null || values === void 0 ? void 0 : values.currency,
+            },
+        }
+        : {}));
+};
+exports.formatDataToSubmit = formatDataToSubmit;

lib/esm/assets/icons.d.ts

 import React from "react";
 export declare function ExchangeRateArrow(): React.JSX.Element;
+export declare const Info: ({ size, mode }: {
+    size?: number | undefined;
+    mode?: "dark" | "light" | undefined;
+}) => React.JSX.Element;

lib/esm/assets/icons.js

@@ -6,1 +6,8 @@ import React from "react";
 }
+export var Info = function (_a) {
+    var size = _a.size, mode = _a.mode;
+    return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: size !== null && size !== void 0 ? size : '24', height: size !== null && size !== void 0 ? size : '24', viewBox: "0 0 24 24", fill: "none", stroke: mode === 'dark' ? 'rgba(254, 211, 154, 1)' : 'rgba(254, 145, 2, 1)', strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" },
+        React.createElement("circle", { cx: "12", cy: "12", r: "10" }),
+        React.createElement("line", { x1: "12", x2: "12", y1: "8", y2: "12" }),
+        React.createElement("line", { x1: "12", x2: "12.01", y1: "16", y2: "16" })));
+};

lib/esm/components/button/index.d.ts

 import React, { ReactNode, DetailedHTMLProps } from "react";
 import { ButtonHTMLAttributes } from "react";
 import "./index.css";
+import { Mode } from "../../types";
 export interface ButtonProps extends DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
@@ -10,3 +11,3 @@ iconLeft?: ReactNode;
     variant?: "primary" | "secondary";
-    mode?: "dark" | "light";
+    mode?: Mode;
     disabled?: boolean;
@@ -13,0 +14,0 @@ loading?: boolean;

lib/esm/components/data-display/details-row/index.d.ts

 import React, { ReactNode } from "react";
 import "./index.css";
+import { Mode } from "../../../types";
 type AmountType = {
@@ -41,5 +42,5 @@ label: string;
      */
-    mode?: "dark" | "light";
+    mode?: Mode;
 };
 declare function DetailsRow({ text, amount, exchangeRate, status, custom, shouldIncludeBorderBottom, shouldIncludeBorderTop, isMobile, mode, }: DetailsRowProps): React.JSX.Element;
 export default DetailsRow;

lib/esm/components/inputs/text-input/index.d.ts

 import React, { ReactNode } from "react";
 import { InputProps } from "antd/lib/input";
+import { Rule } from "antd/lib/form";
 import "./index.css";
+import { Mode } from "../../../types";
 declare const TextInput: React.ForwardRefExoticComponent<InputProps & {
@@ -12,7 +14,7 @@ /**
      */
-    rules?: any[] | undefined;
+    rules?: Rule[] | undefined;
     /**
      * renders in dark or light mode
      */
-    mode?: "dark" | "light" | undefined;
+    mode?: Mode;
     /**
@@ -19,0 +21,0 @@ * Initial value

lib/esm/components/status/index.d.ts

 import React, { ReactNode } from "react";
 import "./index.css";
+import { Mode } from "../../types";
 export type StatusTagProps = {
@@ -15,5 +16,5 @@ /**
      */
-    mode?: "dark" | "light";
+    mode?: Mode;
 };
 declare function Status({ name, color, mode }: StatusTagProps): React.JSX.Element;
 export default Status;

lib/esm/components/wizard-inputs/wizard-amount-input/index.d.ts

 import { InputNumberProps } from "antd/lib/input-number";
 import { SelectProps } from "antd/lib/select";
+import { Rule } from "antd/lib/form";
 import React, { CSSProperties, ReactNode } from "react";
 import "../wizard-select.css";
 import "./index.css";
+import { Mode } from "../../../types";
 type WizardAmountProps = {
@@ -17,3 +19,3 @@ currency: SelectProps & {
         name?: string;
-        rules?: any[];
+        rules?: Rule[];
         /**
@@ -29,3 +31,3 @@ * Initial value
         name?: string;
-        rules?: any[];
+        rules?: Rule[];
         /**
@@ -43,3 +45,3 @@ * Initial value
      */
-    mode?: "dark" | "light";
+    mode?: Mode;
     /**
@@ -46,0 +48,0 @@ * input height (works only for textarea)

lib/esm/components/wizard-inputs/wizard-amount-input/index.js

@@ -35,3 +35,3 @@ var __assign = (this && this.__assign) || function () {
     var _b;
-    var amount = _a.amount, label = _a.label, mode = _a.mode, height = _a.height, containerStyle = _a.containerStyle, _c = _a.currency, options = _c.options, currency = __rest(_c, ["options"]);
+    var amount = _a.amount, _c = _a.label, label = _c === void 0 ? "Amount" : _c, mode = _a.mode, height = _a.height, containerStyle = _a.containerStyle, _d = _a.currency, options = _d.options, currency = __rest(_d, ["options"]);
     var form = Form.useFormInstance();
@@ -65,4 +65,4 @@ // @ts-ignore
         React.createElement("div", { className: "inputs" },
-            React.createElement(Form.Item, { noStyle: true, name: (amount === null || amount === void 0 ? void 0 : amount.name) || "amount", rules: amount === null || amount === void 0 ? void 0 : amount.rules, initialValue: amount === null || amount === void 0 ? void 0 : amount.initialValue },
-                React.createElement(InputNumber, __assign({ placeholder: (amount === null || amount === void 0 ? void 0 : amount.placeholder) || "Enter Amount", addonBefore: React.createElement(CurrencySelector, null), formatter: function (value) {
+            React.createElement(Form.Item, { name: (amount === null || amount === void 0 ? void 0 : amount.name) || "amount", rules: amount === null || amount === void 0 ? void 0 : amount.rules, initialValue: amount === null || amount === void 0 ? void 0 : amount.initialValue },
+                React.createElement(InputNumber, { placeholder: (amount === null || amount === void 0 ? void 0 : amount.placeholder) || "Enter Amount", addonBefore: React.createElement(CurrencySelector, null), formatter: function (value) {
                         return formatValue({
@@ -79,4 +79,4 @@ value: (value === null || value === void 0 ? void 0 : value.toString()) || "",
                         });
-                    }, id: amountName }, amount))))));
+                    }, id: amountName })))));
 };
 export default WizardAmountInput;

lib/esm/components/wizard-inputs/wizard-phone-input/index.d.ts

 import React, { CSSProperties, ReactNode } from "react";
+import { Rule } from "antd/lib/form";
 import { PhoneInputProps } from "react-phone-input-2";
@@ -6,2 +7,3 @@ import "react-phone-input-2/lib/style.css";
 import "./index.css";
+import { Mode } from "../../../types";
 type WizardPhoneProps = PhoneInputProps & {
@@ -13,2 +15,6 @@ /**
     /**
+     * extra content to be placed on roght side of the label
+     */
+    extra?: ReactNode;
+    /**
      * Input name
@@ -20,7 +26,7 @@ */
      */
-    rules?: any[];
+    rules?: Rule[];
     /**
      * renders in dark or light mode
      */
-    mode?: "dark" | "light";
+    mode?: Mode;
     /**
@@ -39,3 +45,3 @@ * Initial value
 };
-declare const WizardPhoneInput: ({ label, containerStyle, height, rules, mode, name, initialValue, ...props }: WizardPhoneProps) => React.JSX.Element;
+declare const WizardPhoneInput: ({ label, containerStyle, height, rules, mode, name, initialValue, extra, ...props }: WizardPhoneProps) => React.JSX.Element;
 export default WizardPhoneInput;

lib/esm/components/wizard-inputs/wizard-phone-input/index.js

@@ -31,3 +31,3 @@ var __assign = (this && this.__assign) || function () {
     var _b;
-    var label = _a.label, containerStyle = _a.containerStyle, height = _a.height, rules = _a.rules, mode = _a.mode, name = _a.name, initialValue = _a.initialValue, props = __rest(_a, ["label", "containerStyle", "height", "rules", "mode", "name", "initialValue"]);
+    var label = _a.label, containerStyle = _a.containerStyle, height = _a.height, rules = _a.rules, mode = _a.mode, name = _a.name, initialValue = _a.initialValue, extra = _a.extra, props = __rest(_a, ["label", "containerStyle", "height", "rules", "mode", "name", "initialValue", "extra"]);
     var form = Form.useFormInstance();
@@ -39,9 +39,27 @@ // @ts-ignore
     };
-    return (React.createElement(Form.Item, { label: label, style: __assign(__assign({}, styles), containerStyle), rules: rules, className: "".concat(mode || "", " clickpesa-wizard-input mobile"), name: name, initialValue: initialValue },
-        React.createElement(PhoneInput, { onlyCountries: props.onlyCountries, enableSearch: props.enableSearch, disableSearchIcon: true, specialLabel: "", placeholder: props.placeholder, containerClass: "tel-input ".concat(mode), inputStyle: __assign({ width: "100%", fontSize: 14, color: "#575962", fontFamily: "Soleil,'sans-serif'" }, props.inputStyle), inputProps: __assign({ id: (formName || "") + (formName ? "_" : "") + (name || "phoneNumber") }, props.inputProps), dropdownStyle: {
-                fontSize: 14,
-                color: "#575962",
-                fontFamily: "Soleil,'sans-serif'",
-            } })));
+    return (React.createElement("div", { style: {
+            position: "relative",
+        } },
+        React.createElement(Form.Item, { label: label, style: __assign(__assign({}, styles), containerStyle), rules: rules, className: "".concat(mode || "", " clickpesa-wizard-input mobile"), name: name, initialValue: initialValue },
+            React.createElement(PhoneInput, { onlyCountries: props.onlyCountries, enableSearch: props.enableSearch, disableSearchIcon: true, specialLabel: "", placeholder: props.placeholder, containerClass: "tel-input ".concat(mode || ""), inputStyle: __assign({ width: "100%", height: "100%", fontSize: 14, color: "#575962", fontFamily: "inherit" }, props.inputStyle), inputProps: __assign({ id: (formName || "") +
+                        (formName ? "_" : "") +
+                        (name || "phoneNumber") }, props.inputProps), dropdownStyle: {
+                    fontSize: 14,
+                    color: "#575962",
+                    fontFamily: "Soleil,'sans-serif'",
+                } })),
+        extra && (React.createElement("div", { style: {
+                position: "absolute",
+                top: "8px",
+                height: "32px",
+                right: "8px",
+                borderTopRightRadius: "8px",
+                borderBottomRightRadius: "8px",
+                background: mode === "dark" ? "#363E43" : "#F3F4F6",
+                padding: ".2rem 1rem",
+                display: "flex",
+                justifyContent: "flex-end",
+                alignItems: "center",
+            } }, extra))));
 };
 export default WizardPhoneInput;

lib/esm/components/wizard-inputs/wizard-select-input/index.d.ts

 import React, { CSSProperties, ReactNode } from "react";
 import { SelectProps } from "antd/lib/select";
+import { Rule } from "antd/lib/form";
 import "../index.css";
 import "../wizard-select.css";
 import "./index.css";
+import { Mode } from "../../../types";
 type WizardSelectProps = SelectProps & {
@@ -18,7 +20,7 @@ /**
      */
-    rules?: any[];
+    rules?: Rule[];
     /**
      * renders in dark or light mode
      */
-    theme?: "dark" | "light";
+    theme?: Mode;
     /**
@@ -25,0 +27,0 @@ * Initial value

lib/esm/components/wizard-inputs/wizard-text-input/index.d.ts

 import React, { ReactNode } from "react";
 import { CSSProperties } from "react";
 import { InputProps } from "antd/lib/input";
+import { Rule } from "antd/lib/form";
 import "../index.css";
 import "./index.css";
+import { Mode } from "../../../types";
 type WizardInputProps = InputProps & {
@@ -12,9 +14,13 @@ /**
     /**
+     * extra content to be placed on roght side of the label
+     */
+    extra?: ReactNode;
+    /**
      * Validation rules
      */
-    rules?: any[];
+    rules?: Rule[];
     /**
      * renders in dark or light mode
      */
-    mode?: "dark" | "light";
+    mode?: Mode;
     /**
@@ -37,3 +43,3 @@ * Initial value
 };
-declare function WizardTextInput({ label, type, rules, name, height, mode, initialValue, textarea, containerStyle, ...props }: WizardInputProps): React.JSX.Element;
+declare function WizardTextInput({ label, type, rules, name, height, mode, initialValue, textarea, containerStyle, extra, ...props }: WizardInputProps): React.JSX.Element;
 export default WizardTextInput;

lib/esm/components/wizard-inputs/wizard-text-input/index.js

@@ -29,3 +29,3 @@ var __assign = (this && this.__assign) || function () {
 function WizardTextInput(_a) {
-    var label = _a.label, type = _a.type, rules = _a.rules, name = _a.name, height = _a.height, mode = _a.mode, initialValue = _a.initialValue, textarea = _a.textarea, containerStyle = _a.containerStyle, props = __rest(_a, ["label", "type", "rules", "name", "height", "mode", "initialValue", "textarea", "containerStyle"]);
+    var label = _a.label, type = _a.type, rules = _a.rules, name = _a.name, height = _a.height, mode = _a.mode, initialValue = _a.initialValue, textarea = _a.textarea, containerStyle = _a.containerStyle, extra = _a.extra, props = __rest(_a, ["label", "type", "rules", "name", "height", "mode", "initialValue", "textarea", "containerStyle", "extra"]);
     var styles = {
@@ -38,5 +38,20 @@ "--wizard-input-height": height && textarea ? height + "px" : textarea ? "60px" : "39px",
     }
-    return (React.createElement(Form.Item, { label: label, style: __assign(__assign({}, styles), containerStyle), rules: rules, className: "".concat(mode || "", " clickpesa-wizard-input mobile"), name: name, initialValue: initialValue },
-        React.createElement(Input, __assign({ type: type }, props))));
+    return (React.createElement("div", { style: {
+            position: "relative",
+        } },
+        React.createElement(Form.Item, { label: label, style: __assign(__assign({}, styles), containerStyle), rules: rules, className: "".concat(mode || "", " clickpesa-wizard-input mobile"), name: name, initialValue: initialValue },
+            React.createElement(Input, __assign({ type: type }, props))),
+        extra && (React.createElement("div", { style: {
+                position: "absolute",
+                top: "1px",
+                height: "32px",
+                right: "1px",
+                borderTopRightRadius: "8px",
+                background: mode === "dark" ? "#363E43" : "#F3F4F6",
+                padding: ".2rem 1rem",
+                display: "flex",
+                justifyContent: "flex-end",
+                alignItems: "center",
+            } }, extra))));
 }
 export default WizardTextInput;

lib/esm/index.d.ts

@@ -1,12 +0,21 @@
-import { FC } from "react";
+import React from "react";
+import "./index.css";
+import { Mode, PayoutCallBackData } from "./types";
 interface PayoutWidgetProps {
     token?: string;
-    clientId?: string;
+    clientId: string;
     theme?: {
         primaryColor?: string;
         fontFamily?: string;
-        mode?: "dark" | "light";
+        mode?: Mode;
     };
+    payoutDetails?: {
+        amount?: number;
+        orderReference?: string;
+        channel?: "BANK" | "MOBILE MONEY";
+    };
+    environment?: "staging" | "production";
+    close?: (payout: PayoutCallBackData) => void;
 }
-declare const PayoutWidget: FC<PayoutWidgetProps>;
+declare const PayoutWidget: ({ theme, payoutDetails, token, clientId, environment, close, }: PayoutWidgetProps) => React.JSX.Element;
 export default PayoutWidget;

lib/esm/index.js

@@ -1,14 +0,25 @@
-import React from "react";
-import Button from "./components/button";
-import Form from "antd/lib/form";
-import WizardTextInput from "./components/wizard-inputs/wizard-text-input";
-import WizardSelectInput from "./components/wizard-inputs/wizard-select-input";
-import WizardPhoneInput from "./components/wizard-inputs/wizard-phone-input";
-import WizardAmountInput from "./components/wizard-inputs/wizard-amount-input";
-import { currencies } from "./data/currencies";
-import DetailsRow from "./components/data-display/details-row";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React, { useEffect, useRef } from "react";
+import { QueryClient, QueryClientProvider } from "react-query";
+import "./index.css";
+import { useContainerSize } from "./hooks/use-container-size";
+import App from "./app";
+import ConstantsProvider from "./context/constants";
+import { PRODUCTION } from "./constants";
+import coreApi, { authApi } from "./config/api";
+var queryClient = new QueryClient();
 var PayoutWidget = function (_a) {
-    var theme = _a.theme;
-    var form = Form.useForm()[0];
-    Form.useWatch(["test"], form);
+    var theme = _a.theme, payoutDetails = _a.payoutDetails, _b = _a.token, token = _b === void 0 ? "" : _b, _c = _a.clientId, clientId = _c === void 0 ? "" : _c, _d = _a.environment, environment = _d === void 0 ? "production" : _d, close = _a.close;
+    var containerRef = useRef(null);
+    var _e = useContainerSize(containerRef);
     var primaryColor = (theme === null || theme === void 0 ? void 0 : theme.primaryColor) || "#FDDC01";
@@ -19,39 +30,41 @@ var styles = {
     };
-    return (React.createElement("div", { style: styles },
-        React.createElement(Form, { form: form, name: ((theme === null || theme === void 0 ? void 0 : theme.mode) || "") + "form", onFinish: function (values) {
-                console.log(values, "values");
-            }, initialValues: {
-                test: "Test",
-                password: "password",
-                xtx: "255655",
-                channel: "TEST",
-                amount: "10000",
-                currency: "TZS",
+    if (!clientId.trim()) {
+        return React.createElement("div", null, "Client ID is not provided");
+    }
+    useEffect(function () {
+        if (environment && clientId) {
+            var API_URL = environment === PRODUCTION
+                ? "https://api.clickpesa.com"
+                : "https://sandbox.clickpesa.com";
+            var AUTH_API_URL = environment === PRODUCTION
+                ? "https://authentication.clickpesa.com"
+                : "https://develop.authentication.clickpesa.com";
+            coreApi.defaults.baseURL = API_URL + "/third-parties";
+            // coreApi.defaults.headers.clientId = clientId;
+            authApi.defaults.baseURL = AUTH_API_URL + "/2fa";
+        }
+    }, [environment, clientId]);
+    return (React.createElement(QueryClientProvider, { client: queryClient },
+        React.createElement(ConstantsProvider, { initialState: {
+                token: token,
+                environment: environment,
+                clientId: clientId,
+                mode: theme === null || theme === void 0 ? void 0 : theme.mode,
+                API_URL: environment === PRODUCTION
+                    ? "https://api.clickpesa.com"
+                    : "https://sandbox.clickpesa.com",
+                AUTH_URL: environment === PRODUCTION
+                    ? "https://authentication.clickpesa.com"
+                    : "https://develop.authentication.clickpesa.com",
+                AWS_REGION: "us-east-2",
+                AWS_USER_POOL_ID: environment === PRODUCTION
+                    ? "us-east-2_aR0hfwOMa"
+                    : "us-east-2_BEIfBrod3",
+                AWS_USER_POOL_WEB_CLIENT_ID: environment === PRODUCTION
+                    ? "5k0nkk6oku523smvt96rggt73g"
+                    : "1n7nj7prghlcdp8bb2p51v2m1t",
             } },
-            React.createElement(WizardTextInput, { name: "test", label: "Name", placeholder: "test", mode: theme === null || theme === void 0 ? void 0 : theme.mode }),
-            React.createElement(WizardAmountInput, { currency: {
-                    options: currencies,
-                }, label: "Amount", mode: theme === null || theme === void 0 ? void 0 : theme.mode }),
-            React.createElement(WizardTextInput, { textarea: true, label: "Textarea", name: "carres", mode: theme === null || theme === void 0 ? void 0 : theme.mode, placeholder: "Helo" }),
-            React.createElement(WizardSelectInput, { options: [
-                    {
-                        label: "TEST",
-                        value: "TEST",
-                    },
-                ], name: "channel", theme: theme === null || theme === void 0 ? void 0 : theme.mode, label: "Channel", placeholder: "Select Channel" }),
-            React.createElement(WizardPhoneInput, { name: "xtx", label: "Phone Number", mode: theme === null || theme === void 0 ? void 0 : theme.mode }),
-            React.createElement(Button, null, "Submit")),
-        React.createElement("br", null),
-        React.createElement("div", null,
-            React.createElement(DetailsRow, { status: {
-                    label: "Test",
-                    color: "blue",
-                    name: form.getFieldValue("test"),
-                }, mode: theme === null || theme === void 0 ? void 0 : theme.mode }),
-            React.createElement(DetailsRow, { text: {
-                    type: "date",
-                    label: "Date",
-                    value: new Date().toISOString(),
-                }, mode: theme === null || theme === void 0 ? void 0 : theme.mode }))));
+            React.createElement("div", { style: __assign({}, styles), ref: containerRef, className: "clickpesa-payout-widget ".concat((theme === null || theme === void 0 ? void 0 : theme.mode) || "") },
+                React.createElement(App, { payoutDetails: payoutDetails, theme: theme, close: close })))));
 };
 export default PayoutWidget;

lib/esm/utils/index.d.ts

@@ -0,2 +1,8 @@
+import { DataToSubmit, PayoutPayload } from "../types";
 export declare const formatAmount: (value: any, digits?: number, minDigits?: number) => string;
 export declare const formatDate: (value: any) => string;
+export declare const delay: (ms: number) => Promise<unknown>;
+export declare const formatErrorMessage: (error: any) => string;
+export declare const formatPhoneNumber: (phone: string) => string;
+export declare const payoutDeliveryTime: (method: "BANK TRANSFER" | "MOBILE MONEY", settlementType?: "RTGS" | "ACH") => "Instant" | "1 Working Day" | "Same Day" | "N/A";
+export declare const formatDataToSubmit: (values: DataToSubmit) => PayoutPayload;

lib/esm/utils/index.js

@@ -0,1 +1,12 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import dayjs from "dayjs";
@@ -11,1 +22,46 @@ export var formatAmount = function (value, digits, minDigits) {
 };
+export var delay = function (ms) { return new Promise(function (res) { return setTimeout(res, ms); }); };
+export var formatErrorMessage = function (error) {
+    var _a, _b, _c;
+    return (((_b = (_a = error === null || error === void 0 ? void 0 : error.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.message) || ((_c = error === null || error === void 0 ? void 0 : error.response) === null || _c === void 0 ? void 0 : _c.data) || (error === null || error === void 0 ? void 0 : error.message));
+};
+export var formatPhoneNumber = function (phone) {
+    return phone === null || phone === void 0 ? void 0 : phone.replace(/(\d{3})(\d{3})(\d{3})(\d{3})/, "$1 $2 $3 $4");
+};
+export var payoutDeliveryTime = function (method, settlementType) {
+    if (method === "MOBILE MONEY") {
+        return "Instant";
+    }
+    if (method === "BANK TRANSFER") {
+        if (settlementType === "ACH") {
+            return "1 Working Day";
+        }
+        if (settlementType === "RTGS") {
+            return "Same Day";
+        }
+    }
+    return "N/A";
+};
+export var formatDataToSubmit = function (values) {
+    return __assign({ amount: values === null || values === void 0 ? void 0 : values.amount, currency: values === null || values === void 0 ? void 0 : values.currency, payout_info: {
+            currency: values === null || values === void 0 ? void 0 : values.currency,
+            payout_address: values === null || values === void 0 ? void 0 : values.payout_address,
+            payout_address_name: values === null || values === void 0 ? void 0 : values.payout_address_name,
+            payout_channel: values === null || values === void 0 ? void 0 : values.channel,
+            payout_channel_provider: values === null || values === void 0 ? void 0 : values.channel_provider,
+            settlement_type: values === null || values === void 0 ? void 0 : values.settlementType,
+            confirmation_notification: {
+                recipient_mobile: values === null || values === void 0 ? void 0 : values.phone,
+                recipient_email: values === null || values === void 0 ? void 0 : values.email,
+                message: values === null || values === void 0 ? void 0 : values.message,
+            },
+        } }, ((values === null || values === void 0 ? void 0 : values["order.reference_id"])
+        ? {
+            order: {
+                reference_id: values === null || values === void 0 ? void 0 : values["order.reference_id"],
+                amount: values === null || values === void 0 ? void 0 : values.amount,
+                currency: values === null || values === void 0 ? void 0 : values.currency,
+            },
+        }
+        : {}));
+};

package.json

 {
   "name": "payout-widget",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "",
@@ -27,7 +27,14 @@ "main": "./lib/cjs/index.js",
   "devDependencies": {
+    "@types/node": "^22.2.0",
     "@types/react": "^18.0.15",
     "@types/react-dom": "^18.0.6",
     "antd": "^5.3.2",
+    "aws-amplify": "^6.5.0",
+    "axios": "^1.7.3",
     "copyfiles": "^2.4.1",
     "dayjs": "^1.11.12",
+    "input-otp": "^1.2.4",
+    "react-currency-input-field": "^3.8.0",
+    "react-phone-input-2": "^2.15.1",
+    "react-query": "^3.39.3",
     "rimraf": "^3.0.2",
@@ -40,7 +47,3 @@ "sass": "^1.77.8",
     "/lib"
-  ],
-  "dependencies": {
-    "react-currency-input-field": "^3.8.0",
-    "react-phone-input-2": "^2.15.1"
-  }
+  ]
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

983234

increased by33.49%

Dependency count

2

decreased by-50%

Number of package files

158

increased by92.68%

Lines of code

12007

increased by84.69%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

16

increased by77.78%

Number of downloads

0

decreased by-100%

Dependency changes

• - Removedreact-currency-input-field@^3.8.0

• - Removedreact-phone-input-2@^2.15.1

• - Removedclassnames@2.5.1(transitive)

• - Removedlodash.debounce@4.0.8(transitive)

• - Removedlodash.memoize@4.1.2(transitive)

• - Removedlodash.reduce@4.6.0(transitive)

• - Removedlodash.startswith@4.2.1(transitive)

• - Removedobject-assign@4.1.1(transitive)

• - Removedprop-types@15.8.1(transitive)

• - Removedreact-currency-input-field@3.9.0(transitive)

• - Removedreact-is@16.13.1(transitive)

• - Removedreact-phone-input-2@2.15.1(transitive)