Checking feature status

After configuring features in the Mantle Admin, you'll need to implement checks in your app code to determine which features are available to a merchant. Mantle provides straightforward methods to check feature status in both frontend and backend contexts.

Backend Implementation

For server-side code, use the MantleClient to check feature status:

const mantleClient = new MantleClient({
  appId: process.env.MANTLE_APP_ID,
  customerApiToken: customerApiToken  // from identify step
});

// Check if a boolean feature is enabled
const hasFeature = await mantleClient.isFeatureEnabled({
  featureKey: 'custom_icons'
});

// Get limit for a feature
const limit = await mantleClient.limitForFeature({
  featureKey: 'product_limit'
});

// Check current usage against limit
const customer = await mantleClient.getCustomer();
const used = customer.usage['Product limit']?.currentValue || 0;
const remaining = limit - used;

Boolean Features

For boolean features (like custom_icons in the example above), isFeatureEnabled() returns a simple true/false value indicating whether the feature is available to the merchant.

Limited Features

For features with numerical limits (like product_limit), you need to:

Get the limit value using limitForFeature()
Fetch the current usage from the customer object
Calculate the remaining availability

Frontend Implementation

For client-side React components, use the useMantle hook:

import { useMantle } from '@heymantle/react';

// Wrap with a <MantleProvider/> component
export default function YourComponent() {
  const { customer, isFeatureEnabled, limitForFeature } = useMantle();
  
  // Check if a boolean feature is enabled
  const hasCustomIcons = isFeatureEnabled({
    featureKey: 'custom_icons'
  });

  // Get limit for a feature
  const productLimit = limitForFeature({
    featureKey: 'product_limit'
  });
  
  // Check current usage against limit
  const used = customer.usage['Product limit']?.currentValue || 0;
  const remaining = productLimit - used;

  // Render UI based on feature availability
  return (
    <div>
      {hasCustomIcons && <CustomIconPicker />}
      
      {remaining > 0 ? (
        <AddProductButton remaining={remaining} />
      ) : (
        <UpgradePrompt feature="products" />
      )}
    </div>
  );
}

The useMantle hook provides the same functionality as the MantleClient but in a React-friendly way, allowing you to:

Check boolean features with isFeatureEnabled()
Get numerical limits with limitForFeature()
Access usage data from the customer object
Conditionally render UI elements based on feature availability

Direct API Approach

If you prefer working directly with the API instead of using the provided client libraries, you can get feature information from the Customer endpoint:

const response = await fetch('https://appapi.heymantle.com/v1/customer', {
  headers: {
    'X-Mantle-App-Id': process.env.MANTLE_APP_ID,
    'X-Mantle-Customer-Api-Token': customerApiToken
  }
});

const data = await response.json();
const { features, usage } = data.customer;

// Check boolean feature
const hasCustomIcons = features.custom_icons?.value === true;

// Check limited feature
const productLimit = features.product_limit?.value || 0;
const usedProducts = usage['Product limit']?.currentValue || 0;

Best Practices

Cache feature checks when appropriate to reduce API calls
Implement fallbacks for when the API might be unavailable
Check features early in your request lifecycle to fail fast
Use consistent feature keys between Mantle Admin and your code
Provide clear messaging to merchants when features aren't available