Commerce: Delivery, Payments, Address, Checkout & Tracking

import { ThreeuThemeProvider } from "threeu-sdk/theme";

<ThreeuThemeProvider
  brand={{ id: "my-store", name: "Abaya Store" }}
  publicToken={import.meta.env.VITE_THREEU_PUBLIC_KEY}
  locale="ar"
  currency="QAR"
  analytics={{
    pixels: config.pixels,          // { meta, tiktok, snapchat, google }
    apiBaseUrl: "https://api.threeu.app",
  }}
>
  <App />
</ThreeuThemeProvider>

import { useDeliveryMethods, useDeliveryQuote } from "threeu-sdk/theme";

function DeliveryPicker({ address, subtotal, onPick }) {
  const { data: methods, loading } = useDeliveryMethods();
  const { quote, data: fee } = useDeliveryQuote();

  async function choose(method) {
    const q = await quote({ method: method.id, lat: address.lat, lng: address.lng, subtotal });
    onPick(method, q.fee, q); // q.needs_location === true → ask for the map pin
  }

  if (loading) return null;
  return methods.map((m) => (
    <button key={m.id} onClick={() => choose(m)}>
      {m.name.en} — {m.provider_enforced ? "set by carrier" : m.price ?? "calculated"}
    </button>
  ));
}

import { TAddress, useAddress } from "threeu-sdk/theme";

function AddressStep({ onReady }) {
  const [address, addr] = useAddress();
  return (
    <>
      <TAddress
        value={address}
        onChange={addr.set}
        map={({ lat, lng, setPoint }) => (
          <MyMap lat={lat} lng={lng} onPick={(la, ln) => setPoint(la, ln)} />
        )}
      />
      <button disabled={!addr.hasCoordinates} onClick={() => onReady(address)}>Continue</button>
    </>
  );
}

// address === { lat, lng, address, city?, area?, building?, floor?, notes? }

import { usePaymentMethods } from "threeu-sdk/theme";

function PaymentPicker({ value, onChange }) {
  const { data: methods } = usePaymentMethods();
  return (methods ?? []).map((m) => (
    <label key={m.id}>
      <input type="radio" name="pay" value={m.id} checked={value === m.id} onChange={() => onChange(m.id)} />
      {m.logo && <img src={m.logo} alt="" />}
      {m.name} {m.fee > 0 && `(+${m.fee})`}
    </label>
  ));
}

import { useProducts } from "threeu-sdk/theme";

function ServicesList() {
  const { data: services, loading } = useProducts({ type: "service" });
  if (loading) return <Spinner />;
  return <TProductGrid products={services} columns={3} />;
}

// Non-React: const { items } = await storefront.catalog.services({ limit: 8 });

import { useBooking } from "threeu-sdk/theme";

function BookServiceButton({ serviceSlug, date, time, form }) {
  const { book, submitting } = useBooking();
  return (
    <button disabled={submitting}
      onClick={async () => {
        const res = await book({ serviceSlug, date, time, form });
        window.location.href = `/orders/${res.orderId}`;
      }}>
      Book
    </button>
  );
}

// Non-React: await storefront.bookings.create({ serviceSlug, date, time, form })

import { useCoupon, useCheckout } from "threeu-sdk/theme";

function Checkout({ items, address, subtotal, deliveryMethod, paymentMethod }) {
  const { apply, coupon } = useCoupon();
  const { checkout, submitting } = useCheckout();

  async function placeOrder() {
    const discount = coupon?.valid ? coupon.discount_amount ?? 0 : 0;
    const result = await checkout({
      items,                       // [{ productId, quantity, price }]
      shipping: {
        fullName: address.name, phone: address.phone, email: address.email,
        address: address.address, city: address.city, area: address.area,
        lat: address.lat, lng: address.lng, // → server distance fee
      },
      deliveryMethod,
      paymentMethod,
      discountCode: coupon?.valid ? coupon.coupon?.code : undefined,
      totalAmount: subtotal - discount, // server figure is authoritative
      currency: "QAR",
    });
    window.location.href = `/orders/${result.orderId}`;
  }

  return <button disabled={submitting} onClick={placeOrder}>Place order</button>;
}

import { useTracker } from "threeu-sdk/theme";
import { useEffect } from "react";

function ProductPage({ product }) {
  const track = useTracker();
  useEffect(() => {
    track.viewItem({ id: product.id, name: product.name, price: product.price });
  }, [product.id]);
  return <AddToCartButton onClick={() =>
    track.addToCart({ id: product.id, price: product.price, quantity: 1 })
  } />;
}

// track.search("abaya"); track.purchase({ orderId, value, currency: "QAR", items });
// Outside React: import { createTracker } from "threeu-sdk/analytics";

// The tracker already forwards UTM automatically:
const track = useTracker(); // reads window.location utm_* on init
track.purchase({ orderId, value: 240, currency: "QAR" }); // ← carries utm_*

// First-touch landing attribution (public, no auth):
await fetch(`${API}/api/analytics/pixel/events`, {
  method: "POST",
  headers: { "Content-Type": "application/json", "platform-id": brandId },
  body: JSON.stringify({ event: "page_view", url: window.location.href }),
});

import { useLead } from "threeu-sdk/theme";

function ContactForm() {
  const { submit, submitting, result } = useLead();
  if (result?.success) return <p>Thanks — we will be in touch.</p>;
  return (
    <form onSubmit={async (e) => {
      e.preventDefault();
      const f = new FormData(e.currentTarget);
      await submit({
        name: f.get("name"), phone: f.get("phone"), email: f.get("email"),
        message: f.get("message"), source: "contact_form",
      });
    }}>
      {/* inputs… */}
      <button disabled={submitting}>Send</button>
    </form>
  );
}

// Non-React: await storefront.leads.create({ phone, email, message, utm })

import { useFaqs } from "threeu-sdk/theme";
import { TJsonLd, faqJsonLd } from "threeu-sdk/theme";

function FaqPage() {
  const { data: faqs = [] } = useFaqs();
  const items = faqs.map((f) => ({ question: f.title, answer: f.value?.answer }));
  return (
    <>
      <TJsonLd schema={faqJsonLd(items)} />
      {faqs.map((f) => <details key={f.slug ?? f.title}><summary>{f.title}</summary><div>{f.value?.answer}</div></details>)}
    </>
  );
}

// Non-React: const posts = await storefront.content.blog();