@pagamio/frontend-commons-lib 0.8.175 → 0.8.183

package/lib/helpers/utils.js

@@ -0,0 +1,77 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}
+/**
+ * Formats a number as currency using en-US locale standards.
+ *
+ * @param {number} price - The numeric value to format as currency
+ * @param {string} [currency="ZAR"] - ISO 4217 currency code (default: "ZAR")
+ * @param {number} [minimumFractionDigits=2] - Minimum fraction digits (default: 2)
+ * @param {number} [maximumFractionDigits] - Optional maximum fraction digits
+ * @param {string} [displaySymbol] - Optional custom symbol to display instead of ISO code
+ * @returns {string} Formatted currency string
+ *
+ * @example
+ * // Basic usage with ZAR (South African Rand)
+ * formatPrice(1234.56); // Returns "ZAR 1,234.56"
+ *
+ * @example
+ * // USD with 2 decimal places
+ * formatPrice(1234.56, "USD"); // Returns "$1,234.56"
+ *
+ * @example
+ * // Euro with standard formatting
+ * formatPrice(1234.56, "EUR"); // Returns "€1,234.56"
+ *
+ * @example
+ * // Custom display symbol for ZAR
+ * formatPrice(1234.56, "ZAR", 2, undefined, "R"); // Returns "R 1,234.56"
+ *
+ * @example
+ * // Custom decimal places (clamping)
+ * formatPrice(1234.5678, "GBP", 2, 3); // Returns "£1,234.568"
+ *
+ * @example
+ * // Fallback behavior with invalid currency
+ * formatPrice(1234.56, "XYZ"); // Returns "XYZ 1,234.56"
+ */
+export const formatPrice = (price, currency = 'ZAR', minimumFractionDigits = 2, maximumFractionDigits, displaySymbol) => {
+    const options = {
+        style: 'currency',
+        currency,
+        minimumFractionDigits,
+    };
+    if (maximumFractionDigits !== undefined) {
+        options.maximumFractionDigits = maximumFractionDigits;
+    }
+    try {
+        const formatted = price.toLocaleString('en-US', options);
+        // If a custom display symbol is provided, replace the currency symbol/code
+        if (displaySymbol) {
+            // Handle different currency formats by finding and replacing the currency part
+            // For currencies like USD ($1,234.56), EUR (€1,234.56), GBP (£1,234.56)
+            const symbolRegex = /^[^\d\s,.-]+/;
+            const symbolMatch = symbolRegex.exec(formatted);
+            if (symbolMatch) {
+                return formatted.replace(symbolMatch[0], displaySymbol);
+            }
+            // For currencies that show as codes like ZAR (ZAR 1,234.56)
+            const codeRegex = /^[A-Z]{3}\s/;
+            const codeMatch = codeRegex.exec(formatted);
+            if (codeMatch) {
+                return formatted.replace(codeMatch[0], `${displaySymbol} `);
+            }
+            // Fallback: just replace the currency code anywhere in the string
+            return formatted.replace(currency, displaySymbol);
+        }
+        return formatted;
+    }
+    catch (error) {
+        console.error('Error formatting currency:', error);
+        // Fallback to basic formatting when Intl fails
+        const fallbackFormatted = `${displaySymbol || currency} ${price.toLocaleString('en-US', { minimumFractionDigits })}`;
+        return fallbackFormatted;
+    }
+};

package/lib/helpers/validations.d.ts

@@ -0,0 +1,80 @@
+import { z } from 'zod';
+export declare const loginFormSchema: z.ZodObject<{
+    username: z.ZodString;
+    password: z.ZodString;
+    rememberMe: z.ZodOptional<z.ZodBoolean>;
+}, "strip", z.ZodTypeAny, {
+    username: string;
+    password: string;
+    rememberMe?: boolean | undefined;
+}, {
+    username: string;
+    password: string;
+    rememberMe?: boolean | undefined;
+}>;
+export type LoginFormSchemaType = z.infer<typeof loginFormSchema>;
+export declare const signupFormSchema: z.ZodEffects<z.ZodEffects<z.ZodObject<{
+    firstName: z.ZodString;
+    lastName: z.ZodString;
+    username: z.ZodString;
+    password: z.ZodString;
+    confirmPassword: z.ZodString;
+    emailAddress: z.ZodString;
+    profile: z.ZodString;
+    role: z.ZodOptional<z.ZodString>;
+}, "strip", z.ZodTypeAny, {
+    username: string;
+    password: string;
+    firstName: string;
+    lastName: string;
+    confirmPassword: string;
+    emailAddress: string;
+    profile: string;
+    role?: string | undefined;
+}, {
+    username: string;
+    password: string;
+    firstName: string;
+    lastName: string;
+    confirmPassword: string;
+    emailAddress: string;
+    profile: string;
+    role?: string | undefined;
+}>, {
+    username: string;
+    password: string;
+    firstName: string;
+    lastName: string;
+    confirmPassword: string;
+    emailAddress: string;
+    profile: string;
+    role?: string | undefined;
+}, {
+    username: string;
+    password: string;
+    firstName: string;
+    lastName: string;
+    confirmPassword: string;
+    emailAddress: string;
+    profile: string;
+    role?: string | undefined;
+}>, {
+    username: string;
+    password: string;
+    firstName: string;
+    lastName: string;
+    confirmPassword: string;
+    emailAddress: string;
+    profile: string;
+    role?: string | undefined;
+}, {
+    username: string;
+    password: string;
+    firstName: string;
+    lastName: string;
+    confirmPassword: string;
+    emailAddress: string;
+    profile: string;
+    role?: string | undefined;
+}>;
+export type SignupFormSchemaType = z.infer<typeof signupFormSchema>;

package/lib/helpers/validations.js

@@ -0,0 +1,39 @@
+import { z } from 'zod';
+export const loginFormSchema = z.object({
+    username: z
+        .string()
+        .min(1, { message: 'Username is required.' })
+        .max(255, { message: 'Username must be at most 255 characters long.' }),
+    password: z
+        .string()
+        .min(1, { message: 'Password is required.' })
+        .max(255, { message: 'Password must be at most 255 characters long.' }),
+    rememberMe: z.boolean().optional(),
+});
+export const signupFormSchema = z
+    .object({
+    firstName: z.string().min(1, 'First name is required'),
+    lastName: z.string().min(1, 'Last name is required'),
+    username: z.string().min(1, { message: 'Username is required.' }).min(8, 'Password confirmation is required'),
+    password: z
+        .string()
+        .min(8, { message: 'Be at least 8 characters long' })
+        .regex(/[a-zA-Z]/, { message: 'Contain at least one letter.' })
+        .regex(/\d/, { message: 'Contain at least one number.' })
+        .regex(/[^a-zA-Z0-9]/, {
+        message: 'Contain at least one special character.',
+    })
+        .trim(),
+    confirmPassword: z.string().min(8, 'Password confirmation is required'),
+    emailAddress: z.string().email({ message: 'Please enter a valid email.' }).trim(),
+    profile: z.string(),
+    role: z.string().optional(),
+})
+    .refine((data) => data.password === data.confirmPassword, {
+    message: "Passwords don't match",
+    path: ['confirmPassword'],
+})
+    .refine((data) => data.role, {
+    message: 'This field is required',
+    path: ['role'],
+});

package/lib/index.d.ts

@@ -0,0 +1,21 @@
+export * from './form-engine';
+export { default as PagamioTable, type CoreTableColumnDef, type PagamioMantineTableProps } from './pagamio-table';
+export { default as DashboardVisualWrapper, type DashboardWrapperProps } from './dashboard-visuals';
+export { default as FormEngineDrawer, type FormEngineDrawerProps } from './pagamio-drawer';
+export { default as TopUpWalletDrawer, type TopUpWalletDrawerProps } from './pagamio-drawer/TopUpWalletDrawer';
+export * from './components';
+export * from './auth';
+export * from './api';
+export * from './context';
+export * from './shared';
+export * from './helpers';
+export * from './dashboard-visuals/utils';
+export * from './pagamio-table/utils';
+export * from './pagamio-table/data-table/pdfExportUtils';
+export * from './pagamio-table/data-table/types';
+export * from './dashboard-visuals/types';
+export type { TopUpWalletPaymentData } from './pagamio-drawer/TopUpWalletDrawer/TopUpWalletContent';
+export * from './translations';
+export * from './rbac';
+export { useImageUpload } from './shared/hooks/useImageUpload';
+export type { UseImageUploadProps, UploadResponse } from './shared/hooks/useImageUpload';

package/lib/index.js

@@ -0,0 +1,30 @@
+// Feature Components
+export * from './form-engine';
+export { default as PagamioTable } from './pagamio-table';
+export { default as DashboardVisualWrapper } from './dashboard-visuals';
+export { default as FormEngineDrawer } from './pagamio-drawer';
+export { default as TopUpWalletDrawer } from './pagamio-drawer/TopUpWalletDrawer';
+// Core UI Components
+export * from './components';
+// Authentication & API
+export * from './auth';
+export * from './api';
+// Context Providers
+export * from './context';
+// Utilities & Helpers
+export * from './shared';
+export * from './helpers';
+// Dashboard Visual Utils
+export * from './dashboard-visuals/utils';
+// Pagamio Table Utils
+export * from './pagamio-table/utils';
+export * from './pagamio-table/data-table/pdfExportUtils';
+export * from './pagamio-table/data-table/types';
+// Pagamio types
+export * from './dashboard-visuals/types';
+// translations
+export * from './translations';
+// Role-Based Access Control (RBAC)
+export * from './rbac';
+// Hooks
+export { useImageUpload } from './shared/hooks/useImageUpload';

package/lib/mocks/mockApiRequestsConfig.d.ts

@@ -0,0 +1,2 @@
+import type { MockConfig } from 'src';
+export declare const mockApiRequestsConfig: MockConfig[];

package/lib/mocks/mockApiRequestsConfig.js

@@ -0,0 +1,343 @@
+// Common product data
+const products = {
+    PROCESSED_MILK: 'Processed Milk',
+    BILTONG: 'Biltong Sliced Chill',
+    MUFFIN: 'Muffin',
+    BLUEBERRY_MUFFIN: 'Blueberry Muffin',
+    JELLY_TOTS: 'Jelly Tots',
+    CHOCOLATE_BAR: 'Chocolate Bar',
+    COLA: 'Cola 330ml',
+    PREMIUM_BEER: 'Premium Beer',
+    DRY_PEANUTS: 'Dry Roasted Peanuts',
+};
+// Common locations
+const locations = {
+    VIP_LOUNGE: 'VIP LOUNGE',
+    SPIRIT_BAR: 'SPIRIT BAR',
+    MAIN_ENTRANCE: 'MAIN ENTRANCE',
+    FOOD_COURT: 'FOOD COURT',
+};
+// Common metrics config
+const metricEndpoints = {
+    METRICS: '/dashboard/metrics',
+    QUERY: '/dashboard/query',
+};
+// Common query parameter configurations
+const queryParams = {
+    METRICS: {
+        COUNT: { aggregationType: 'COUNT' },
+        SUM: { aggregationType: 'SUM' },
+    },
+    SORT: {
+        ASC: 'ASC',
+        DESC: 'DESC',
+    },
+    DIMENSIONS: {
+        PRODUCT: ['productName'],
+        LOCATION_PRODUCT: ['stationName', 'productName'],
+        TIME_PRODUCT: ['date', 'productName'],
+        STOCK_DETAIL: ['stationName', 'productName', 'initialStock', 'reorderLevel', 'unitPrice'],
+    },
+};
+// Helper function to create metric response
+const createMetricResponse = (metric, currentValue, previousValue) => ({
+    metric,
+    currentValue,
+    previousValue,
+    percentageChange: ((currentValue - previousValue) / previousValue) * 100,
+    formattedValue: null,
+    formattedChange: null,
+    additionalData: {
+        [metric]: currentValue,
+    },
+});
+// Helper function to create product stock data
+const createProductStock = (stationName, productName, { currentStock, initialStock, reorderLevel, unitPrice, daysInStock, }) => {
+    const stockRatio = Math.round((currentStock / initialStock) * 100);
+    return {
+        stationName,
+        productName,
+        currentStock,
+        initialStock,
+        reorderLevel,
+        unitPrice,
+        daysInStock,
+        stockRatio,
+    };
+};
+// Helper function for time series data
+const generateTimeSeriesData = (date, products) => products.map((p) => ({ date, productName: p.name, stockLevel: p.level }));
+// Helper function to create query params
+const createQueryParams = (dimensions, metrics, { limit, sortBy, sortDirection, aggregationType, } = {}) => ({
+    dimensions,
+    metrics,
+    ...(limit && { limit }),
+    ...(sortBy && { sortBy }),
+    ...(sortDirection && { sortDirection }),
+    ...(aggregationType && { aggregationType }),
+});
+// Helper function for depletion metrics
+const createDepletionData = (productName, { depletionPercentage, initialStock, currentStock, }) => ({
+    productName,
+    depletionPercentage,
+    initialStock,
+    currentStock,
+});
+export const mockApiRequestsConfig = [
+    // Total SKUs metric
+    {
+        path: metricEndpoints.METRICS,
+        method: 'POST',
+        params: createQueryParams(queryParams.DIMENSIONS.PRODUCT, ['totalSKUs'], queryParams.METRICS.COUNT),
+        response: createMetricResponse('totalSKUs', 156, 142),
+    },
+    // Stock Value metric
+    {
+        path: metricEndpoints.METRICS,
+        method: 'POST',
+        params: createQueryParams(queryParams.DIMENSIONS.PRODUCT, ['stockValue'], queryParams.METRICS.SUM),
+        response: createMetricResponse('stockValue', 1256780.45, 1345890.23),
+    },
+    // Low Stock Items metric
+    {
+        path: metricEndpoints.METRICS,
+        method: 'POST',
+        params: createQueryParams(queryParams.DIMENSIONS.PRODUCT, ['lowStockCount'], queryParams.METRICS.COUNT),
+        response: createMetricResponse('lowStockCount', 12, 8),
+    },
+    // Initial vs Current Inventory per SKU
+    {
+        path: metricEndpoints.QUERY,
+        method: 'POST',
+        params: createQueryParams(queryParams.DIMENSIONS.PRODUCT, ['initialStock', 'currentStock'], {
+            limit: 10,
+            sortBy: 'initialStock',
+            sortDirection: queryParams.SORT.DESC,
+        }),
+        response: [
+            createProductStock(locations.VIP_LOUNGE, products.BLUEBERRY_MUFFIN, {
+                currentStock: 2,
+                initialStock: 40,
+                reorderLevel: 10,
+                unitPrice: 3.0,
+                daysInStock: 5,
+            }),
+            createProductStock(locations.SPIRIT_BAR, products.BLUEBERRY_MUFFIN, {
+                currentStock: 5,
+                initialStock: 50,
+                reorderLevel: 10,
+                unitPrice: 2.25,
+                daysInStock: 3,
+            }),
+            createProductStock(locations.MAIN_ENTRANCE, products.PREMIUM_BEER, {
+                currentStock: 8,
+                initialStock: 100,
+                reorderLevel: 20,
+                unitPrice: 4.75,
+                daysInStock: 15,
+            }),
+            createProductStock(locations.FOOD_COURT, products.BLUEBERRY_MUFFIN, {
+                currentStock: 12,
+                initialStock: 120,
+                reorderLevel: 30,
+                unitPrice: 2.25,
+                daysInStock: 10,
+            }),
+            createProductStock(locations.SPIRIT_BAR, products.COLA, {
+                currentStock: 15,
+                initialStock: 100,
+                reorderLevel: 30,
+                unitPrice: 2.5,
+                daysInStock: 45,
+            }),
+            createProductStock(locations.MAIN_ENTRANCE, products.DRY_PEANUTS, {
+                currentStock: 15,
+                initialStock: 50,
+                reorderLevel: 15,
+                unitPrice: 1.99,
+                daysInStock: 40,
+            }),
+            createProductStock(locations.SPIRIT_BAR, products.PREMIUM_BEER, {
+                currentStock: 27,
+                initialStock: 120,
+                reorderLevel: 25,
+                unitPrice: 4.75,
+                daysInStock: 30,
+            }),
+            createProductStock(locations.FOOD_COURT, products.PREMIUM_BEER, {
+                currentStock: 29,
+                initialStock: 80,
+                reorderLevel: 20,
+                unitPrice: 4.5,
+                daysInStock: 20,
+            }),
+            createProductStock(locations.VIP_LOUNGE, products.DRY_PEANUTS, {
+                currentStock: 30,
+                initialStock: 50,
+                reorderLevel: 15,
+                unitPrice: 2.5,
+                daysInStock: 45,
+            }),
+            createProductStock(locations.MAIN_ENTRANCE, products.COLA, {
+                currentStock: 32,
+                initialStock: 150,
+                reorderLevel: 40,
+                unitPrice: 2.5,
+                daysInStock: 20,
+            }),
+        ],
+    },
+    // SKU Depletion Over Time
+    {
+        path: metricEndpoints.QUERY,
+        method: 'POST',
+        params: createQueryParams(queryParams.DIMENSIONS.TIME_PRODUCT, ['stockLevel'], {
+            limit: 30,
+            sortBy: 'date',
+            sortDirection: queryParams.SORT.ASC,
+        }),
+        response: [
+            ...generateTimeSeriesData('2025-01-01', [
+                { name: products.PROCESSED_MILK, level: 100 },
+                { name: products.BILTONG, level: 100 },
+                { name: products.MUFFIN, level: 100 },
+                { name: products.JELLY_TOTS, level: 100 },
+                { name: products.CHOCOLATE_BAR, level: 100 },
+            ]),
+            ...generateTimeSeriesData('2025-01-08', [
+                { name: products.PROCESSED_MILK, level: 78 },
+                { name: products.BILTONG, level: 82 },
+                { name: products.MUFFIN, level: 85 },
+                { name: products.JELLY_TOTS, level: 92 },
+                { name: products.CHOCOLATE_BAR, level: 87 },
+            ]),
+            ...generateTimeSeriesData('2025-01-15', [
+                { name: products.PROCESSED_MILK, level: 62 },
+                { name: products.BILTONG, level: 72 },
+                { name: products.MUFFIN, level: 73 },
+                { name: products.JELLY_TOTS, level: 85 },
+                { name: products.CHOCOLATE_BAR, level: 78 },
+            ]),
+            ...generateTimeSeriesData('2025-01-22', [
+                { name: products.PROCESSED_MILK, level: 48 },
+                { name: products.BILTONG, level: 59 },
+                { name: products.MUFFIN, level: 62 },
+                { name: products.JELLY_TOTS, level: 73 },
+                { name: products.CHOCOLATE_BAR, level: 65 },
+            ]),
+            ...generateTimeSeriesData('2025-01-29', [
+                { name: products.PROCESSED_MILK, level: 32 },
+                { name: products.BILTONG, level: 45 },
+                { name: products.MUFFIN, level: 50 },
+                { name: products.JELLY_TOTS, level: 62 },
+                { name: products.CHOCOLATE_BAR, level: 53 },
+            ]),
+            ...generateTimeSeriesData('2025-02-05', [
+                { name: products.PROCESSED_MILK, level: 20 },
+                { name: products.BILTONG, level: 32 },
+                { name: products.MUFFIN, level: 35 },
+                { name: products.JELLY_TOTS, level: 43 },
+                { name: products.CHOCOLATE_BAR, level: 40 },
+            ]),
+        ],
+    },
+    // Top Fast-Moving SKUs
+    {
+        path: metricEndpoints.QUERY,
+        method: 'POST',
+        params: createQueryParams(queryParams.DIMENSIONS.PRODUCT, ['depletionRate'], {
+            limit: 3,
+            sortBy: 'depletionRate',
+            sortDirection: queryParams.SORT.DESC,
+        }),
+        response: [
+            { productName: products.PROCESSED_MILK, depletionRate: 80.0 },
+            { productName: products.BILTONG, depletionRate: 68.0 },
+            { productName: products.MUFFIN, depletionRate: 65.0 },
+        ],
+    },
+    // Stock Status for Critical Items
+    {
+        path: metricEndpoints.QUERY,
+        method: 'POST',
+        params: createQueryParams(queryParams.DIMENSIONS.PRODUCT, ['stockPercentage'], {
+            limit: 4,
+            sortBy: 'stockPercentage',
+            sortDirection: queryParams.SORT.ASC,
+        }),
+        response: [
+            { productName: products.PROCESSED_MILK, stockPercentage: 20.0 },
+            { productName: products.BILTONG, stockPercentage: 32.0 },
+            { productName: products.MUFFIN, stockPercentage: 35.0 },
+        ],
+    },
+    // Inventory Depletion by Product
+    {
+        path: metricEndpoints.QUERY,
+        method: 'POST',
+        params: createQueryParams(queryParams.DIMENSIONS.PRODUCT, ['depletionPercentage'], {
+            limit: 5,
+            sortBy: 'depletionPercentage',
+            sortDirection: queryParams.SORT.DESC,
+        }),
+        response: [
+            createDepletionData(products.PROCESSED_MILK, {
+                depletionPercentage: 80,
+                initialStock: 500,
+                currentStock: 100,
+            }),
+            createDepletionData(products.BILTONG, {
+                depletionPercentage: 68,
+                initialStock: 625,
+                currentStock: 200,
+            }),
+            createDepletionData(products.MUFFIN, {
+                depletionPercentage: 65,
+                initialStock: 800,
+                currentStock: 280,
+            }),
+            createDepletionData(products.JELLY_TOTS, {
+                depletionPercentage: 57,
+                initialStock: 300,
+                currentStock: 129,
+            }),
+            createDepletionData(products.CHOCOLATE_BAR, {
+                depletionPercentage: 64,
+                initialStock: 750,
+                currentStock: 270,
+            }),
+        ],
+    },
+    // Low Stock Items by Location
+    {
+        path: metricEndpoints.QUERY,
+        method: 'POST',
+        params: createQueryParams(queryParams.DIMENSIONS.STOCK_DETAIL, ['currentStock'], {
+            sortBy: 'currentStock',
+            sortDirection: queryParams.SORT.ASC,
+        }),
+        response: [
+            createProductStock(locations.VIP_LOUNGE, products.BLUEBERRY_MUFFIN, {
+                currentStock: 2,
+                initialStock: 40,
+                reorderLevel: 10,
+                unitPrice: 3.0,
+                daysInStock: 5,
+            }),
+            createProductStock(locations.MAIN_ENTRANCE, products.PREMIUM_BEER, {
+                currentStock: 8,
+                initialStock: 100,
+                reorderLevel: 20,
+                unitPrice: 4.75,
+                daysInStock: 15,
+            }),
+            createProductStock(locations.SPIRIT_BAR, products.BLUEBERRY_MUFFIN, {
+                currentStock: 5,
+                initialStock: 50,
+                reorderLevel: 10,
+                unitPrice: 2.25,
+                daysInStock: 3,
+            }),
+        ],
+    },
+];

package/lib/pagamio-drawer/TopUpWalletDrawer/TopUpWalletContent.d.ts

@@ -0,0 +1,14 @@
+interface TopUpModalProps {
+    isSubmitting: boolean;
+    handleCloseDrawer: () => void;
+    handleProcessPayment: (data: TopUpWalletPaymentData) => void;
+}
+type PaymentMethod = 'eft' | 'mobile_money';
+type MobileProvider = 'mtn' | 'vodacom' | 'cell_c' | 'telkom';
+export interface TopUpWalletPaymentData {
+    amount: string;
+    paymentMethod: PaymentMethod;
+    mobileProvider?: MobileProvider;
+}
+declare const TopUpWalletContent: ({ isSubmitting, handleCloseDrawer, handleProcessPayment }: TopUpModalProps) => import("react/jsx-runtime").JSX.Element;
+export default TopUpWalletContent;

package/lib/pagamio-drawer/TopUpWalletDrawer/TopUpWalletContent.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Label, Radio, TextInput } from 'flowbite-react';
+import { BsBank } from 'react-icons/bs';
+import { FaCreditCard, FaMobileAlt } from 'react-icons/fa';
+import { useState } from 'react';
+import Button from '../../components/ui/Button';
+const TopUpWalletContent = ({ isSubmitting, handleCloseDrawer, handleProcessPayment }) => {
+    const [amount, setAmount] = useState('');
+    const [paymentMethod, setPaymentMethod] = useState('eft');
+    const [mobileProvider, setMobileProvider] = useState('mtn');
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        const data = {
+            amount,
+            paymentMethod,
+            mobileProvider,
+        };
+        handleProcessPayment(data);
+    };
+    return (_jsxs("div", { children: [_jsx("div", { className: "px-5 pt-5", children: _jsxs("form", { onSubmit: handleSubmit, children: [_jsxs("div", { className: "mb-5", children: [_jsx(Label, { htmlFor: "amount", value: "Amount (ZAR)" }), _jsx(TextInput, { id: "amount", type: "number", value: amount, onChange: (e) => setAmount(e.target.value), placeholder: "Enter amount in Rands", required: true, min: "1", step: "0.01", theme: {
+                                        field: {
+                                            base: 'mt-1 w-full',
+                                            input: {
+                                                base: 'w-full h-[39px] !bg-transparent border-gray-300 text-gray-900',
+                                            },
+                                        },
+                                    } })] }), _jsxs("div", { className: "space-y-3", children: [_jsx(Label, { value: "Select Payment Method" }), _jsxs("div", { className: "grid grid-cols-1 gap-4", children: [_jsxs("button", { type: "button", className: `flex w-full cursor-pointer items-center justify-between rounded-lg border p-4 hover:bg-gray-50 ${paymentMethod === 'eft' ? 'border-primary-500 bg-primary-500/5' : 'border-gray-200'}`, onClick: () => setPaymentMethod('eft'), children: [_jsxs("div", { className: "flex items-center space-x-3", children: [_jsx(Radio, { id: "eft", name: "paymentMethod", value: "eft", checked: paymentMethod === 'eft', onChange: () => setPaymentMethod('eft'), className: "checked:!bg-primary-500 checked:!border-primary-500" }), _jsxs("div", { className: "space-y-0.5", children: [_jsx(Label, { htmlFor: "eft", className: "mb-0 cursor-pointer", children: _jsxs("span", { className: "flex items-center gap-2", children: [_jsx(FaCreditCard, { className: "text-primary" }), "Credit/Debit Card (EFT)"] }) }), _jsx("p", { className: "text-xs text-gray-500", children: "Instant transfer via secure payment" })] })] }), _jsx(BsBank, { className: "h-6 w-6 text-gray-400" })] }), _jsxs("button", { type: "button", className: `flex w-full cursor-pointer items-center justify-between rounded-lg border p-4 hover:bg-gray-50 ${paymentMethod === 'mobile_money' ? 'border-primary-500 bg-primary-500/5' : 'border-gray-200'}`, onClick: () => setPaymentMethod('mobile_money'), children: [_jsxs("div", { className: "flex items-center space-x-3", children: [_jsx(Radio, { id: "mobile_money", name: "paymentMethod", value: "mobile_money", checked: paymentMethod === 'mobile_money', onChange: () => setPaymentMethod('mobile_money'), className: "checked:!bg-primary-500 checked:!border-primary-500" }), _jsxs("div", { className: "space-y-0.5", children: [_jsx(Label, { htmlFor: "mobile_money", className: "mb-0 cursor-pointer", children: _jsxs("span", { className: "flex items-center gap-2", children: [_jsx(FaMobileAlt, { className: "text-primary" }), "Mobile Money"] }) }), _jsx("p", { className: "text-xs text-gray-500", children: "Pay using mobile wallet" })] })] }), _jsx("div", { className: "flex h-6 w-6 items-center justify-center text-gray-400", children: _jsx(FaMobileAlt, {}) })] })] })] }), paymentMethod === 'mobile_money' && (_jsxs("div", { className: "space-y-3 mt-5", children: [_jsx(Label, { value: "Select Mobile Provider" }), _jsx("div", { className: "grid grid-cols-1 gap-3", children: [
+                                        { id: 'mtn', name: 'MTN' },
+                                        { id: 'vodacom', name: 'Vodacom' },
+                                        { id: 'cell_c', name: 'Cell C' },
+                                        { id: 'telkom', name: 'Telkom' },
+                                    ].map((provider) => (_jsxs("button", { type: "button", className: `flex w-full cursor-pointer items-center rounded-lg border p-3 hover:bg-gray-50 ${mobileProvider === provider.id ? 'border-primary-500 bg-primary-500/5' : 'border-gray-200'}`, onClick: () => setMobileProvider(provider.id), children: [_jsx(Radio, { id: provider.id, name: "mobileProvider", value: provider.id, checked: mobileProvider === provider.id, onChange: () => setMobileProvider(provider.id), className: "checked:!bg-primary-500 checked:!border-primary-500" }), _jsx(Label, { htmlFor: provider.id, className: "ml-2 cursor-pointer", children: provider.name })] }, provider.id))) })] }))] }) }), _jsxs("div", { className: "flex border-t bg-white", style: {
+                    height: '50px',
+                    position: 'fixed',
+                    bottom: 0,
+                    zIndex: 100,
+                    width: '420px',
+                }, children: [_jsx(Button, { className: "w-full flex-1 h-full rounded-none", disabled: isSubmitting, onClick: handleCloseDrawer, children: "Cancel" }), _jsx(Button, { className: "text-white flex-1 h-full rounded-none", disabled: isSubmitting, type: "submit", onClick: handleSubmit, children: "Continue to Payment" })] })] }));
+};
+export default TopUpWalletContent;

package/lib/pagamio-drawer/TopUpWalletDrawer/index.d.ts

@@ -0,0 +1,11 @@
+interface TopUpWalletDrawerProps {
+    title: string;
+    isOpen: boolean;
+    isSubmitting: boolean;
+    marginTop?: string;
+    onSubmit: (data: any) => Promise<void>;
+    onClose: () => void;
+}
+declare const TopUpWalletDrawer: React.FC<TopUpWalletDrawerProps>;
+export default TopUpWalletDrawer;
+export type { TopUpWalletDrawerProps };

package/lib/pagamio-drawer/TopUpWalletDrawer/index.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import BaseDrawer from '../components/BaseDrawer';
+import TopUpWalletContent from './TopUpWalletContent';
+const TopUpWalletDrawer = ({ title, isOpen, isSubmitting, marginTop = '0px', onClose, onSubmit, }) => {
+    return (_jsx(BaseDrawer, { title: title, isOpen: isOpen, marginTop: marginTop, onClose: onClose, children: _jsx(TopUpWalletContent, { isSubmitting: isSubmitting, handleProcessPayment: onSubmit, handleCloseDrawer: onClose }) }));
+};
+export default TopUpWalletDrawer;