Built on Salesforce Revenue Cloud

import { useConfigurator } from '@autonom/sdk';

function ProductConfigurator({ productId }: { productId: string }) {
  const { structure, updateAttribute, pricing, isLoading } =
    useConfigurator(productId);

  if (isLoading) return <Spinner />;

  return (
    <div>
      <h2>{structure.name}</h2>
      {structure.attributes.map((attr) => (
        <AttributeSelector
          key={attr.id}
          attribute={attr}
          onChange={(val) => updateAttribute(attr.id, val)}
        />
      ))}
      <PriceSummary total={pricing.total} currency={pricing.currency} />
    </div>
  );
}

import { useCart, useCheckout } from '@autonom/sdk';

function CartView() {
  const { items, removeItem, total } = useCart();
  const { submit, isSubmitting } = useCheckout();

  return (
    <div>
      {items.map((item) => (
        <CartItem key={item.id} item={item} onRemove={removeItem} />
      ))}
      <p>Total: {total}</p>
      <button onClick={submit} disabled={isSubmitting}>
        {isSubmitting ? 'Processing...' : 'Place Order'}
      </button>
    </div>
  );
}