@vindhq/sloud-payment-sdk 1.0.0

package/dist/react/src/services/payments/types.d.ts

@@ -0,0 +1,68 @@
+import { PaymentStatus } from "../../hooks/types";
+import { BaseAPIResponse } from "../config/endpoints";
+export interface IGetPaymentMethodsResponse extends BaseAPIResponse {
+    data: {
+        bank_transfer: boolean;
+        sloud_wallet: boolean;
+        card: boolean;
+    };
+}
+export interface IPaymentStatusRequest {
+    path: {
+        id: string;
+        reference: string;
+    };
+}
+export interface IGetProductsResponse {
+    status: string;
+    message: string;
+    data: {
+        status: PaymentStatus;
+    };
+}
+export interface IGeneratePaymentInstrumentPayload {
+    amount: number;
+    customer: {
+        first_name: string;
+        last_name: string;
+        phone_number: string;
+        email: string;
+    };
+}
+export interface IPaymentInstrumentResponse extends BaseAPIResponse {
+    data: {
+        reference: string;
+        account_name: string;
+        account_number: string;
+        bank: string;
+        expiry: string;
+        amount: number;
+        charge: number;
+        currency: string;
+    };
+}
+export interface IPaymentStatusResponse extends BaseAPIResponse {
+    data: {
+        reference: string;
+        status: string;
+        amount: number;
+        currency: string;
+        updatedAt: string;
+    };
+}
+export interface IGetChargePayload {
+    amount: number;
+}
+export interface IGetChargeRequest {
+    path: {
+        slug: string;
+    };
+}
+export interface IGetChargeResponse {
+    status: string;
+    message: string;
+    data: {
+        charge: number;
+        total_amount: number;
+    };
+}

package/dist/react/src/services/products/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/react/src/services/products/types.d.ts

@@ -0,0 +1,124 @@
+export interface IGetProductsResponse {
+    status: string;
+    message: string;
+    data: IProduct[];
+    metadata: IMetadata;
+}
+export interface IProductDetail {
+    id: string;
+    name: string;
+    description: string;
+    price: number;
+    currency: string;
+    image_url: string[];
+    variation: Record<string, string[]>;
+    discount: number;
+    discounted_amount: number;
+    availability: string;
+    in_stock: number;
+}
+export interface IGetProductResponse {
+    status: string;
+    message: string;
+    data: IProductDetail;
+}
+export interface IPaymentDetails {
+    reference?: string;
+    account_name?: string;
+    account_number?: string;
+    bank?: string;
+    expiry?: string;
+    amount?: number;
+    currency?: string;
+}
+export interface IOrderProductResponseData {
+    payment_details: IPaymentDetails;
+}
+export interface IOrderProductResponse {
+    status: string;
+    message: string;
+    data: IOrderProductResponseData;
+}
+export interface IMetadata {
+    cursor: string;
+    beforeCursor: string;
+    totalCount: number;
+    pageSize: number;
+}
+export interface IProduct {
+    id: number;
+    name: string;
+    category: string;
+    amount: number;
+    currency: string;
+    in_stock: number;
+    availability: number;
+    image_url: string[];
+    discounted_amount: number;
+}
+export interface IGetProductsRequest {
+    path: {
+        id: string;
+        collectionId: string | null;
+    };
+    params: {
+        name: string;
+        pageSize: number;
+        pageNumber: number;
+        cursor?: number;
+        beforeCursor?: number;
+    };
+}
+export interface IGetProductRequest {
+    path: {
+        productId: string;
+        storeId: string;
+    };
+}
+export interface IOrderProductRequest {
+    path: {
+        slug: string;
+    };
+}
+export interface IBuyerDetails {
+    first_name: string;
+    last_name: string;
+    email: string;
+    phone_number: string;
+}
+export interface IDeliveryDetails {
+    street: string;
+    country: string;
+    state: string;
+    city: string;
+    note: string;
+}
+export interface IItem {
+    product_id: string;
+    discount: number;
+    variation: string[];
+    quantity: number;
+}
+export interface IOrderProductRequestPayload {
+    discount: number;
+    additional_amount: number;
+    payment_method: string;
+    buyer_details: IBuyerDetails;
+    channel: 'pickup' | 'delivery';
+    delivery_details: IDeliveryDetails;
+    items: IItem[];
+}
+export interface IGetProductAvailabilityRequest {
+    path: {
+        slug: string;
+        productId: string;
+    };
+}
+export interface IGetProductAvailabilityResponse {
+    status: string;
+    message: string;
+    data: {
+        is_available: boolean;
+        quantity: number;
+    };
+}

package/dist/react/src/services/store/index.d.ts

@@ -0,0 +1,2 @@
+export declare const getSubdomainClient: () => string;
+export declare const getSubDomain: (host: string) => string;

package/dist/react/src/services/store/types.d.ts

@@ -0,0 +1,57 @@
+export interface IGetStorePath {
+    slug: string;
+}
+export interface IGetStoreResponse {
+    status: string;
+    message: string;
+    data: IGetStoreData;
+}
+export type SocialMediaPlatformTypes = 'Whatsapp' | 'Facebook' | 'Instagram' | 'TikTok' | 'X';
+export interface IGetStoreData {
+    id: string;
+    banner_url: string;
+    avatar_url: string;
+    maintenance_mode: boolean;
+    preferences?: {
+        mode_of_delivery: 'Pickup' | 'Delivery' | 'Delivery/Pickup';
+        mode_of_transaction_charge: 'Customer' | 'Merchant';
+    };
+    social_media: {
+        platform: SocialMediaPlatformTypes;
+        url: string;
+    }[];
+    delivery_areas: {
+        location: string;
+        amount: number;
+    }[];
+    phone_number: string;
+    collections: Collection[];
+    best_sellers: Bestseller[];
+    metadata: Metadata;
+}
+export interface Metadata {
+    description: string;
+    author: string;
+    store_slug: string;
+    address: string;
+    business_name: string;
+}
+export interface Bestseller {
+    id: number;
+    product: string;
+    category: string;
+    amount: number;
+    currency: string;
+    in_stock: number;
+    availability: number;
+    keywords: string[];
+    image_url: string[];
+    name: string;
+    discounted_amount: number;
+}
+export interface Collection {
+    id: string;
+    name: string;
+    description: string;
+    cover_image_url: string[];
+}

package/dist/react/src/services/utils/widgetConfig.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Utility function to get the current base URL based on widget configuration
+ * @returns The appropriate base URL for API calls
+ */
+export declare const getBaseURL: () => string;
+/**
+ * Utility function to check if widget is in local environment
+ * @returns boolean indicating if widget is in local environment
+ */
+export declare const isLocalEnvironment: () => boolean;
+/**
+ * Utility function to get widget configuration
+ * @returns Current widget options or null if not set
+ */
+export declare const getWidgetConfiguration: () => import("../index").WidgetOptions;
+/**
+ * Debug utility to log current widget options state
+ * @returns void
+ */
+export declare const debugWidgetOptions: () => void;

package/dist/react/src/svg_components/ArrowLeftIcon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const ArrowLeftIcon: (props?: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default ArrowLeftIcon;

package/dist/react/src/svg_components/BankTransferIcon.d.ts

@@ -0,0 +1,2 @@
+declare const BankTransferIcon: (props?: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default BankTransferIcon;

package/dist/react/src/svg_components/CancelIcon.d.ts

@@ -0,0 +1,7 @@
+interface ICancelIcon {
+    fillColor: string;
+    height?: number;
+    width?: number;
+}
+declare const CancelIcon: ({ fillColor, height, width }: ICancelIcon) => JSX.Element;
+export default CancelIcon;

package/dist/react/src/svg_components/CardIcon.d.ts

@@ -0,0 +1,2 @@
+declare const CardIcon: (props?: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default CardIcon;

package/dist/react/src/svg_components/CloseIcon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const CloseIcon: ({ color, ...props }: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default CloseIcon;

package/dist/react/src/svg_components/CopyIcon.d.ts

@@ -0,0 +1,2 @@
+declare const CopyIcon: () => import("react/jsx-runtime").JSX.Element;
+export default CopyIcon;

package/dist/react/src/svg_components/EyeCloseIcon.d.ts

@@ -0,0 +1,5 @@
+interface IEyeCloseIcon {
+    fillColor: string;
+}
+declare const EyeCloseIcon: ({ fillColor }: IEyeCloseIcon) => JSX.Element;
+export default EyeCloseIcon;

package/dist/react/src/svg_components/EyeOpenIcon.d.ts

@@ -0,0 +1,5 @@
+interface IEyeOpenIcon {
+    fillColor: string;
+}
+declare const EyeOpenIcon: ({ fillColor }: IEyeOpenIcon) => JSX.Element;
+export default EyeOpenIcon;

package/dist/react/src/svg_components/SloudIcon.d.ts

@@ -0,0 +1,2 @@
+declare const SloudIcon: (props?: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default SloudIcon;

package/dist/react/src/utils/enums/AxiosErrorCodes.d.ts

@@ -0,0 +1,7 @@
+export declare enum EnumErrorCodes {
+    BadRquest = 400,
+    NotFound = 404,
+    Unauthorized = 401,
+    Forbidden = 403,
+    ServerError = 500
+}

package/dist/react/src/utils/enums/AxiosMethods.d.ts

@@ -0,0 +1,7 @@
+export declare enum EnumAxiosMethod {
+    Get = "get",
+    Post = "post",
+    Put = "put",
+    Patch = "patch",
+    Delete = "delete"
+}

package/dist/react/src/utils/helpers/classNames.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Conditionally combines class names from an object.
+ * @param classes - An object where keys are class names and values are booleans.
+ * @returns A space-separated string of class names.
+ */
+declare const classNames: (classes: Record<string, boolean>) => string;
+export default classNames;

package/dist/react/src/utils/helpers/formatCurrency.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Formats a numeric value into Nigerian Naira currency format.
+ *
+ * @param value - The amount to format (number or numeric string).
+ * @param currencyCode - Optional ISO 4217 currency code (default: 'NGN').
+ * @param locale - Optional BCP 47 locale string (default: 'en-NG').
+ * @returns A currency-formatted string, e.g. ₦12,500.00
+ */
+declare const formatCurrency: (value?: number | string, currencyCode?: string, locale?: string, showDecimals?: boolean) => string;
+export default formatCurrency;

package/dist/react/src/utils/helpers/phoneDefaults.d.ts

@@ -0,0 +1,3 @@
+import type { CountryCode } from 'libphonenumber-js';
+export declare const getDefaultCountryFromSettings: () => CountryCode;
+export declare const getDefaultPrefixFromCountry: (country: CountryCode) => string;

package/dist/react/src/utils/helpers/validatePhone.d.ts

@@ -0,0 +1,7 @@
+import type { CountryCode } from 'libphonenumber-js';
+interface PhoneValidationOptions {
+    country?: CountryCode;
+    strictPrefix?: string;
+}
+declare const validatePhone: (phone?: string, opts?: PhoneValidationOptions) => boolean;
+export default validatePhone;

package/dist/react/src/utils/image_utils/index.d.ts

@@ -0,0 +1,9 @@
+export declare const IMAGES: {
+    backgroundMock: string;
+    success: string;
+    waiting: string;
+    maintenance: string;
+    sloudEmblem: string;
+    sloudLogo: string;
+    noImageFallback: string;
+};

package/dist/react/src/utils/storage/index.d.ts

@@ -0,0 +1,9 @@
+export declare const AppStorage: {
+    setItem: (key: string, value: string) => void;
+    getItem: (key: string) => string | null;
+    removeItem: (key: string) => void;
+};
+export declare const AppStorageKeys: {
+    Store: string;
+    Bag: string;
+};

package/dist/react/src/widget.d.ts

@@ -0,0 +1,27 @@
+export interface PaymentWidgetOptions {
+    public_key: string;
+    isLocalEnv?: boolean;
+    amount: number;
+    first_name: string;
+    last_name: string;
+    phone_number: string;
+    email: string;
+}
+export default class PaymentWidget {
+    private options;
+    private container;
+    private root;
+    constructor(options: PaymentWidgetOptions);
+    /**
+     * Creates the container div if it doesn’t exist.
+     */
+    private ensureContainer;
+    /**
+     * Renders the widget popup.
+     */
+    showPopup(): void;
+    /**
+     * Optionally allow hiding/unmounting the widget.
+     */
+    hidePopup(): void;
+}

package/dist/rollup.config.d.ts

@@ -0,0 +1,8 @@
+import { RollupOptions } from "rollup";
+/**
+ * Rollup configuration for bundling the PaymentWidget project.
+ * Supports TypeScript, PostCSS, asset imports, and generates
+ * ESM, CJS, and UMD bundles with sourcemaps.
+ */
+declare const config: RollupOptions;
+export default config;

package/dist/rollup.config.dts.d.ts

@@ -0,0 +1,3 @@
+import { RollupOptions } from "rollup";
+declare const config: RollupOptions;
+export default config;

package/dist/src/components/Button/Button.types.d.ts

@@ -0,0 +1,6 @@
+import { HTMLProps } from 'react';
+export interface IButton extends HTMLProps<HTMLButtonElement> {
+    mode: 'outline' | 'solid';
+    type?: 'button' | 'submit' | 'reset';
+    loading?: boolean;
+}

package/dist/src/components/Button/index.d.ts

@@ -0,0 +1,3 @@
+import { IButton } from './Button.types';
+declare const Button: ({ mode, children, disabled, className, style, loading, ...rest }: IButton) => import("react/jsx-runtime").JSX.Element;
+export default Button;

package/dist/src/components/CopyToClipboardSpan/CopyToClipboard.types.d.ts

@@ -0,0 +1,4 @@
+export interface ICopyToClipboard {
+    label: string;
+    text: string;
+}

package/dist/src/components/CopyToClipboardSpan/index.d.ts

@@ -0,0 +1,3 @@
+import { ICopyToClipboard } from './CopyToClipboard.types';
+declare const CopyToClipboardSpan: ({ label, text }: ICopyToClipboard) => import("react/jsx-runtime").JSX.Element;
+export default CopyToClipboardSpan;

package/dist/src/components/Input/Input.types.d.ts

@@ -0,0 +1,17 @@
+import { type ChangeEvent, type FocusEvent, type HTMLProps } from 'react';
+export interface IInput extends HTMLProps<HTMLInputElement> {
+    error?: string | boolean;
+    label: string;
+    placeholder?: string;
+    name?: string;
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+    onFocus?: (e: FocusEvent<HTMLInputElement>) => void;
+    onDelete?: () => void;
+    type?: string;
+    value?: string | number;
+    disabled?: boolean;
+    autoComplete?: string;
+    title?: string;
+    required?: boolean;
+    inputClass?: string;
+}

package/dist/src/components/Input/index.d.ts

@@ -0,0 +1,3 @@
+import { IInput } from "./Input.types";
+declare const Input: ({ error, name, onChange, onFocus, onDelete, label, placeholder, type, value, disabled, autoComplete, title, required, inputClass, }: IInput) => JSX.Element;
+export default Input;

package/dist/src/components/Skeleton/PaymentOptionSkeletons.d.ts

@@ -0,0 +1,6 @@
+import "react-loading-skeleton/dist/skeleton.css";
+interface PaymentOptionsSkeletonProps {
+    numberOfSkeletons?: number;
+}
+declare const PaymentOptionsSkeleton: ({ numberOfSkeletons, }: PaymentOptionsSkeletonProps) => import("react/jsx-runtime").JSX.Element;
+export default PaymentOptionsSkeleton;

package/dist/src/components/TextArea/TextArea.types.d.ts

@@ -0,0 +1,19 @@
+import { type ChangeEvent, type FocusEvent, type HTMLProps } from 'react';
+export interface ITextArea extends HTMLProps<HTMLTextAreaElement> {
+    error?: string | boolean;
+    label: string;
+    placeholder?: string;
+    name?: string;
+    onChange?: (e: ChangeEvent<HTMLTextAreaElement>) => void;
+    onFocus?: (e: FocusEvent<HTMLTextAreaElement>) => void;
+    onDelete?: () => void;
+    value?: string;
+    disabled?: boolean;
+    autoComplete?: string;
+    title?: string;
+    required?: boolean;
+    inputClass?: string;
+    rows?: number;
+    cols?: number;
+    showCancelIcon?: boolean;
+}

package/dist/src/components/TextArea/index.d.ts

@@ -0,0 +1,3 @@
+import { ITextArea } from "./TextArea.types";
+declare const TextArea: ({ error, name, onChange, onFocus, onDelete, label, placeholder, value, disabled, autoComplete, title, required, inputClass, rows, cols, showCancelIcon, }: ITextArea) => JSX.Element;
+export default TextArea;

package/dist/src/components/Widget.d.ts

@@ -0,0 +1,6 @@
+import "../styles/widget.scss";
+interface Props {
+    isOpen: boolean;
+}
+declare const Widget: ({ isOpen }: Props) => import("react/jsx-runtime").JSX.Element;
+export default Widget;

package/dist/src/components/modals/AwaitingPaymentModal/AwaitingPaymentModal.d.ts

@@ -0,0 +1,2 @@
+declare const AwaitingPaymentModal: () => import("react/jsx-runtime").JSX.Element;
+export default AwaitingPaymentModal;

package/dist/src/components/modals/AwaitingPaymentTimeoutModal/AwaitingPaymentTimeoutModal.d.ts

@@ -0,0 +1,2 @@
+declare const AwaitingPaymentTimeoutModal: () => import("react/jsx-runtime").JSX.Element;
+export default AwaitingPaymentTimeoutModal;

package/dist/src/components/modals/Modal.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+interface ModalProps {
+    title: string;
+    children: React.JSX.Element;
+    isControllable?: boolean;
+    isOpen?: boolean;
+    isCentralizedHeader?: boolean;
+}
+declare const Modal: ({ title, children, isControllable, isOpen, isCentralizedHeader, }: ModalProps) => import("react/jsx-runtime").JSX.Element | null;
+export default Modal;

package/dist/src/components/modals/PaymentDetailsModal/PaymentDetailsModal.d.ts

@@ -0,0 +1,2 @@
+declare const PaymentDetailsModal: () => import("react/jsx-runtime").JSX.Element;
+export default PaymentDetailsModal;

package/dist/src/components/modals/PaymentDetailsModal/hooks/useTimer.d.ts

@@ -0,0 +1,7 @@
+interface UseTimerProps {
+    start: boolean;
+    restart?: boolean;
+    callback?: () => void;
+}
+declare const useTimer: ({ start, restart, callback }: UseTimerProps) => string;
+export default useTimer;

package/dist/src/components/modals/PaymentOptionsModal/PaymentOptionsModal.d.ts

@@ -0,0 +1,2 @@
+declare const PaymentOptionsModal: () => import("react/jsx-runtime").JSX.Element;
+export default PaymentOptionsModal;

package/dist/src/components/modals/PaymentOptionsModal/RadioButton.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+declare const RadioButton: ({ label, name, value, id, disabled, onChange, checked, }: {
+    label: string;
+    name: string;
+    value: string;
+    id: string;
+    disabled?: boolean;
+    checked?: boolean;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}) => import("react/jsx-runtime").JSX.Element;
+export default RadioButton;

package/dist/src/components/modals/PaymentOptionsModal/paymentOptionsMap.d.ts

@@ -0,0 +1,5 @@
+export declare const paymentOptionsMap: Record<string, {
+    label: string;
+    value: string;
+    disabled?: boolean;
+}>;

package/dist/src/components/modals/SuccessModal/SuccessModal.d.ts

@@ -0,0 +1,2 @@
+declare const SuccessModal: () => import("react/jsx-runtime").JSX.Element;
+export default SuccessModal;

package/dist/src/components/modals/state/actions/data.d.ts

@@ -0,0 +1,10 @@
+import { ProductItem } from '../../../../hooks/types';
+import { IGetStoreData } from '../../../../services';
+import { DeliveryDetails, EditItemAction, RemoveItemAction, ResetDataAction, SetDataAction, SetDeliveryDetailsAction, SetLoadingAction, SetStoreAction } from '../types';
+export declare const setData: (data: ProductItem[]) => SetDataAction;
+export declare const setStore: (store: IGetStoreData) => SetStoreAction;
+export declare const setLoading: (isLoading: boolean) => SetLoadingAction;
+export declare const setDeliveryDetails: (details: Partial<DeliveryDetails>) => SetDeliveryDetailsAction;
+export declare const editItemQuantity: (index: number, quantity?: number) => EditItemAction;
+export declare const removeItem: (index: number) => RemoveItemAction;
+export declare const resetData: () => ResetDataAction;

package/dist/src/components/modals/state/actions/index.d.ts

@@ -0,0 +1,5 @@
+import { ResetAllAction } from '../types';
+export declare const resetAll: () => ResetAllAction;
+export * from './data';
+export * from './modal';
+export * from './payment';

package/dist/src/components/modals/state/actions/modal.d.ts

@@ -0,0 +1,5 @@
+import { ResetModalAction, SetAboutModalAction, SetCurrentIndexAction, SetOpenAction } from '../types';
+export declare const setOpen: (isOpen: boolean) => SetOpenAction;
+export declare const setCurrentIndex: (index: number) => SetCurrentIndexAction;
+export declare const setAboutModal: (isOpen: boolean) => SetAboutModalAction;
+export declare const resetModal: () => ResetModalAction;

package/dist/src/components/modals/state/actions/payment.d.ts

@@ -0,0 +1,7 @@
+import { PaymentStatus } from "../../../../hooks/types";
+import { IPaymentDetails } from "../../../../services/products/types";
+import { ResetPaymentAction, SetAdditionalAmountAction, SetPaymentDetailsAction, SetPaymentStatusAction } from "../types";
+export declare const setPaymentStatus: (status: PaymentStatus) => SetPaymentStatusAction;
+export declare const setPaymentDetails: (details: IPaymentDetails) => SetPaymentDetailsAction;
+export declare const setAdditionalAmount: (amount: number) => SetAdditionalAmountAction;
+export declare const resetPayment: () => ResetPaymentAction;

package/dist/src/components/modals/state/constants/actionTypes.d.ts

@@ -0,0 +1,24 @@
+export declare const PAYMENT_ACTIONS: {
+    readonly SET_PAYMENT_STATUS: "SET_PAYMENT_STATUS";
+    readonly SET_PAYMENT_DETAILS: "SET_PAYMENT_DETAILS";
+    readonly SET_ADDITIONAL_AMOUNT: "SET_ADDITIONAL_AMOUNT";
+    readonly RESET_PAYMENT: "RESET_PAYMENT";
+};
+export declare const MODAL_ACTIONS: {
+    readonly SET_OPEN: "SET_OPEN";
+    readonly SET_CURRENT_INDEX: "SET_CURRENT_INDEX";
+    readonly SET_ABOUT_MODAL: "SET_ABOUT_MODAL";
+    readonly RESET_MODAL: "RESET_MODAL";
+};
+export declare const DATA_ACTIONS: {
+    readonly SET_DATA: "SET_DATA";
+    readonly SET_STORE: "SET_STORE";
+    readonly SET_LOADING: "SET_LOADING";
+    readonly SET_DELIVERY_DETAILS: "SET_DELIVERY_DETAILS";
+    readonly EDIT_ITEM: "EDIT_ITEM";
+    readonly REMOVE_ITEM: "REMOVE_ITEM";
+    readonly RESET_DATA: "RESET_DATA";
+};
+export declare const GLOBAL_ACTIONS: {
+    readonly RESET_ALL: "RESET_ALL";
+};