Built for every quoting scenario
Du guided selling B2B à l'e-commerce self-service, le SDK Quotonoms'adapte à votre cas d'usage — sans jamais imposer de UI.
Guided Selling
Un configurateur étape par étape qui guide le vendeur ou le client dans le choix des options produit. Le prix se met à jour en temps réel à chaque sélection, et la soumission n'est possible que lorsque la configuration est complète et valide.
import { AutonomProvider, useConfigurator, usePricing } from '@autonom/sdk';
function GuidedConfigurator({ productId }: { productId: string }) {
const { structure, updateAttribute, isValid } = useConfigurator(productId);
const { total, lineItems, isLoading } = usePricing();
return (
<div className="space-y-6">
<h2 className="text-2xl font-bold">{structure.name}</h2>
{structure.attributes.map((attr) => (
<div key={attr.id}>
<label className="text-sm font-medium">{attr.label}</label>
<select
value={attr.selectedValue ?? ''}
onChange={(e) => updateAttribute(attr.id, e.target.value)}
>
{attr.options.map((opt) => (
<option key={opt.value} value={opt.value}>
{opt.displayValue}
</option>
))}
</select>
</div>
))}
<div className="border-t pt-4">
{isLoading ? (
<p className="text-muted">Calculating price…</p>
) : (
<p className="text-2xl font-bold">
Total: {total.formatted}
</p>
)}
</div>
<button disabled={!isValid}>Add to Quote</button>
</div>
);
}E-commerce Integration
Intégrez le quoting Salesforce Revenue Cloud dans un site e-commerce existant sans toucher à votre stack. Catalogue produits, gestion du panier et checkout sont exposés via des hooks typés — votre UI, vos règles.
import { useCatalog, useCart, useCheckout } from '@autonom/sdk';
function ProductCatalog() {
const { products, isLoading } = useCatalog({ category: 'hardware' });
const { items, addToCart, removeFromCart, total } = useCart();
const { submit, isSubmitting } = useCheckout();
return (
<div>
{/* Catalogue */}
<div className="grid grid-cols-3 gap-4">
{products.map((product) => (
<div key={product.id}>
<h3>{product.name}</h3>
<p>{product.basePrice.formatted}</p>
<button onClick={() => addToCart(product.id)}>
Add to Cart
</button>
</div>
))}
</div>
{/* Panier */}
<aside>
{items.map((item) => (
<div key={item.id}>
<span>{item.name} × {item.quantity}</span>
<button onClick={() => removeFromCart(item.id)}>✕</button>
</div>
))}
<p>Total: {total.formatted}</p>
<button
onClick={submit}
disabled={isSubmitting || items.length === 0}
>
{isSubmitting ? 'Submitting…' : 'Checkout'}
</button>
</aside>
</div>
);
}Bundle Configuration
Configurez des bundles complexes avec des produits optionnels, des contraintes de compatibilité et un pricing dynamique. La structure récursive reflète fidèlement l'arbre produit Salesforce, quel que soit son niveau de profondeur.
import { useConfigurator } from '@autonom/sdk';
// Rendu récursif d'un bundle et de ses composants enfants
function BundleNode({ nodeId }: { nodeId: string }) {
const { structure, updateAttribute, toggleOptional } = useConfigurator(nodeId);
return (
<div className="pl-4 border-l border-border">
<div className="flex items-center gap-2">
<h3 className="font-semibold">{structure.name}</h3>
{structure.isOptional && (
<input
type="checkbox"
checked={structure.isIncluded}
onChange={() => toggleOptional(nodeId)}
/>
)}
</div>
{/* Attributs du nœud courant */}
{structure.attributes.map((attr) => (
<select
key={attr.id}
value={attr.selectedValue ?? ''}
onChange={(e) => updateAttribute(attr.id, e.target.value)}
>
{attr.options.map((opt) => (
<option key={opt.value} value={opt.value}>{opt.displayValue}</option>
))}
</select>
))}
{/* Récursion sur les enfants */}
{structure.children.map((child) => (
<BundleNode key={child.id} nodeId={child.id} />
))}
</div>
);
}Build your own use case
Tous les hooks sont composables. Combinez useConfigurator, useCart et useCheckout pour créer l'expérience qui correspond exactement à votre besoin.