Omni Storefront

A lightweight, customizable, and WhatsApp-first storefront component for React. Designed for businesses to capture orders and leads, redirecting them directly to WhatsApp for fulfillment.

Features

• WhatsApp Integration: Redirects orders and inquiries to WhatsApp using the official API format.
• Built-in Cart: Includes complete shopping cart logic (add, remove, update quantities).
• Fully Customizable: Supports custom message formatting and UI styling.
• Modular: Components can be used independently, such as the WhatsAppWrapper.
• Type-Safe: Built with TypeScript for reliable integration.

Installation

To install the package, run the following command:

npm install omni-storefront

Or using Yarn:

yarn add omni-storefront

Usage

1. The Full Storefront

The OmniStorefront component renders a complete catalog with cart functionality.

import OmniStorefront, { StoreConfig, CartItem } from 'omni-storefront';

const MY_STORE_CONFIG: StoreConfig = {
  name: "My Business Name",
  whatsappNumber: "1234567890", // Phone number without symbols
  currency: "$",
  heroImage: "https://example.com/image.jpg",
  themeColor: "#2563EB",
  categories: ["Products", "Services"],
  menu: [
    { 
      id: 1, 
      name: "Product A", 
      price: 100, 
      category: "Products", 
      image: "...",
      description: "Product description."
    }
  ]
};

function App() {
  return (
    <OmniStorefront 
      config={MY_STORE_CONFIG} 
      messageFormatter={(cart, total, currency) => {
        return `New Order: ${cart.length} items. Total: ${currency}${total}`;
      }}
    />
  );
}

2. The Wrapper Component

Use WhatsAppWrapper to add WhatsApp redirection to any element.

import { WhatsAppWrapper } from 'omni-storefront';

// Default button style
<WhatsAppWrapper 
  phoneNumber="1234567890" 
  message="I'm interested!" 
  defaultStyle 
/>

// Custom child component
<WhatsAppWrapper phoneNumber="1234567890" message="I'm interested!">
  <button className="my-custom-button">Contact Us</button>
</WhatsAppWrapper>

Utilities

The package exports utility functions for formatting URLs manually.

import { formatWhatsAppUrl } from 'omni-storefront';

const url = formatWhatsAppUrl("1234567890", "Hello there!");

License

MIT