restomenu-preorder-sdk

🚀 Installation

CDN

⚙️ Advanced Configuration

Complete configuration example with all available options:

      Copy
const fullConfig = {
  // Required parameters
  pointId: 'your-point-id',
  
  // Optional parameters
  serverUrl: 'https://external-menu.dev.restomenu.cc',
  orderId: 'existing-order-id', // For editing existing orders
  authCode: 'your-auth-code', // Authorization code for RestoPlace integration
  debug: true,
  timeout: 300000, // 5 minutes
  
  // Theme configuration
  theme: 'light', // 'light', 'dark', or custom theme object
  // OR custom theme:
  theme: {
    theme: 'custom',
    colors: {
      mode: 'light',
      primary: { main: '#e91e63' },
      secondary: { main: '#00bcd4' },
      error: { main: '#f44336' },
      warning: { main: '#ff9800' },
      info: { main: '#2196f3' },
      success: { main: '#4caf50' }
    }
  },
  
  // Animation settings
  animations: {
    enabled: true,
    duration: 300,
    easing: 'ease-in-out', // 'ease', 'ease-in', 'ease-out', 'ease-in-out', 'linear'
    type: 'fade', // 'fade', 'scale', 'slide'
    delay: 0, // Animation delay in ms
    fillMode: 'forwards', // 'none', 'forwards', 'backwards', 'both'
    iterationCount: 1 // number or 'infinite'
  },
  
  // Modal configuration (logical settings only)
  modal: {
    closeOnBackdropClick: true,
    closeOnEscape: true
    // Note: position moved to styling.overlay.alignItems
  },
  
  // Styling options - explicit separation of overlay and modal CSS properties
  styling: {
    // CSS properties for overlay element
    overlay: {
      // Default styles are applied automatically, override as needed:
      position: 'fixed',
      top: '0',
      left: '0',
      right: '0',
      bottom: '0',
      zIndex: '10000',
      background: 'rgba(0, 0, 0, 0.5)',
      display: 'flex',
      alignItems: 'center', // replaces modal.position: 'center'
      justifyContent: 'center',
      // Any other CSS properties for overlay
    },
    
    // CSS properties for modal container element
    modal: {
      // Default styles are applied automatically, override as needed:
      width: '90vw',
      height: '90vh',
      maxWidth: '1200px',
      maxHeight: '800px',
      backgroundColor: 'white',
      border: 'none',
      borderRadius: '18px',
      boxShadow: '0 10px 30px rgba(0, 0, 0, 0.3)',
      transform: 'scale(0.9)',
      overflow: 'hidden',
      // Any other CSS properties for modal
      // For example:
      // fontFamily: 'Arial, sans-serif',
      // fontSize: '16px',
      // color: '#333333'
    }
  }
};

// Open preorder with configuration
const result = await preorder.open(fullConfig);

// Handle result
if (result.code) {
  // Error occurred
  console.error('Error:', result.message);
} else {
  // Success
  console.log('Order created:', result.orderId);
  console.log('Total:', result.total, result.currency);
}

🎨 Styling & Positioning

Example of custom positioning and styling:

      Copy
// Position modal in right side of screen
const positioningConfig = {
  pointId: 'your-point-id',
  serverUrl: 'https://external-menu.dev.restomenu.cc',
  styling: {
    // Overlay positioned in right part of screen
    overlay: {
      top: '0',
      left: '375px',
      bottom: '0',
      right: '0',
      position: 'fixed',
      zIndex: '10000',
      background: 'rgba(0, 0, 0, 0.5)',
      // Any other CSS properties for overlay
    },
    // Modal fills overlay area
    modal: {
      top: '0',
      left: '0',
      bottom: '0',
      right: '0',
      position: 'absolute',
      borderRadius: '0',
      backgroundColor: 'white',
      width: '100%',
      height: '100%',
      // Any other CSS properties for modal
    }
  },
  modal: {
    closeOnBackdropClick: true,
    closeOnEscape: true
  }
};

await preorder.open(positioningConfig);

🔐 Authorization Code Management

Handle authorization codes for RestoPlace integration:

      Copy
// Set authorization code before opening modal
preorder.setAuthCode('your-auth-code-here');

// Or include in configuration
const config = {
  pointId: 'your-point-id',
  authCode: 'your-auth-code-here',
  serverUrl: 'https://external-menu.dev.restomenu.cc'
};

// Get current authorization code
const currentCode = preorder.getAuthCode();
console.log('Current auth code:', currentCode);

// Clear authorization code
preorder.clearAuthCode();

// Open modal with auth code
const result = await preorder.open(config);

🛠️ SDK Methods

Available methods for controlling the SDK:

      Copy
// Open preorder modal
const result = await preorder.open(config);

// Close modal programmatically
preorder.close();

// Set theme before or during modal usage
preorder.setTheme('light'); // 'light', 'dark'
preorder.setTheme({         // or custom theme object
  theme: 'custom',
  colors: {
    mode: 'light',
    primary: { main: '#e91e63' },
    secondary: { main: '#00bcd4' },
    error: { main: '#f44336' },
    warning: { main: '#ff9800' },
    info: { main: '#2196f3' },
    success: { main: '#4caf50' }
  }
});

// Configure SDK globally (settings persist across open() calls)
preorder.configure({
  serverUrl: 'https://external-menu.dev.restomenu.cc',
  debug: true,
  theme: 'dark',
  animations: { enabled: true, duration: 500 }
});

// Reset SDK to initial state
preorder.reset();

// Destroy SDK instance (cleanup)
preorder.destroy();

// Authorization code methods
preorder.setAuthCode('your-auth-code');
const authCode = preorder.getAuthCode();
preorder.clearAuthCode();

// Get SDK information
console.log('Version:', preorder.version);
console.log('Is Open:', preorder.isOpen);
console.log('Current Theme:', preorder.currentTheme);
console.log('Auth Code:', preorder.getAuthCode());

📋 CHANGELOG

Latest changes in version v1.5.3:

For complete changelog history, see the CHANGELOG.md file.