Examples

import { createSimplio3DClient } from '@simplio3d/sdk';

async function buildConfigurator(projectId: string, accessToken: string) {
  const client = createSimplio3DClient({
    apiUrl: process.env.SIMPLIO3D_API_URL,
    accessToken
  });

  // 1. Load all configurator data
  const [project, blocks, pricing, formFields] = await Promise.all([
    client.getProject(projectId),
    client.getOptionBlocks(projectId),
    client.getPricingBlocks(projectId),
    client.getFormFields(projectId)
  ]);

  // 2. Build selection state from defaults
  const selections = {
    dropdownSelections: {} as Record<string, string>,
    selectMaterialSelections: {} as Record<string, string>,
    checkboxSelections: {} as Record<string, string[]>,
    toggleSwitchSelections: {} as Record<string, string>,
    carouselSelections: {} as Record<string, string>,
  };

  blocks.forEach(block => {
    if (block.defaultDropdownValue && block.type === 'dropdown') {
      selections.dropdownSelections[block.id] = block.defaultDropdownValue;
    }
    if (block.defaultCheckboxValues && block.type === 'checkbox') {
      selections.checkboxSelections[block.id] = block.defaultCheckboxValues;
    }
  });

  // 3. Evaluate conditional visibility
  const visibility = await client.evaluateConditions(projectId, { selections });

  // 4. Calculate initial price
  const price = await client.calculatePrice(projectId, {
    selections,
    variables: {}
  });

  return {
    project,
    blocks: blocks.filter(b => {
      const vis = visibility.find(v => v.blockId === b.id);
      return vis ? vis.blockVisible : true;
    }),
    pricing,
    formFields,
    price,
    selections,
    visibility
  };
}

import { createSimplio3DClient } from '@simplio3d/sdk';
import { useState, useEffect, useCallback, useMemo } from 'react';

function useConfigurator(projectId: string, accessToken: string) {
  const client = useMemo(() => createSimplio3DClient({
    apiUrl: import.meta.env.VITE_API_URL,
    accessToken
  }), [accessToken]);

  const [blocks, setBlocks] = useState([]);
  const [selections, setSelections] = useState({
    dropdownSelections: {},
    selectMaterialSelections: {},
    checkboxSelections: {},
    toggleSwitchSelections: {},
    carouselSelections: {},
  });
  const [visibility, setVisibility] = useState([]);
  const [price, setPrice] = useState(null);
  const [loading, setLoading] = useState(true);

  // Load initial data
  useEffect(() => {
    Promise.all([
      client.getOptionBlocks(projectId),
      client.getPricingBlocks(projectId)
    ]).then(([blocks]) => {
      setBlocks(blocks);
      setLoading(false);
    });
  }, [client, projectId]);

  // Re-evaluate when selections change
  useEffect(() => {
    client.evaluateConditions(projectId, { selections })
      .then(setVisibility);
    client.calculatePrice(projectId, { selections, variables: {} })
      .then(setPrice);
  }, [client, projectId, selections]);

  const setSelection = useCallback((blockId, value) => {
    setSelections(prev => ({
      ...prev,
      dropdownSelections: { ...prev.dropdownSelections, [blockId]: value }
    }));
  }, []);

  return { blocks, selections, setSelection, visibility, price, loading };
}

// Add configured product to cart with pricing
async function addToCart(projectId, selections, variables) {
  const client = createSimplio3DClient({ apiUrl: API_URL, accessToken });

  // Get final price
  const price = await client.calculatePrice(projectId, {
    selections,
    variables
  });

  // Get a screenshot of the current configuration
  const screenshotUrl = 'https://cdn.example.com/screenshot.png';

  // Submit as a quote (or redirect to cart)
  const submission = await client.submitQuote(projectId, {
    formData: { name: user.name, email: user.email },
    configuration: {
      selections,
      variables,
      screenshotUrl
    }
  });

  // Or send to your e-commerce platform
  await fetch('/api/cart/add', {
    method: 'POST',
    body: JSON.stringify({
      productId: projectId,
      price: price.totalPrice,
      currency: price.currency,
      configurationId: submission.id,
      thumbnail: screenshotUrl,
      options: selections
    })
  });
}