Store Availability

<unify-store-availability-widget
  api-key="your-api-key"
  item-id="your-item-id"
></unify-store-availability-widget>

<button onclick="document.querySelector('unify-store-availability-widget').open = true">
  Where to buy
</button>

<unify-store-availability-widget
  api-key="your-api-key"
  item-id="your-item-id"
  no-dialog
></unify-store-availability-widget>

document.querySelector('unify-store-availability-widget').config = {
  dialogTitle: 'Find in store',
  locale: 'en-US',
  maxRange: 20,
  // ... more options
};

document.querySelector('unify-store-availability-widget').config = {
  customStoreCtas: [
    { id: 'favorite-store', label: 'Add to favorites' },
    {
      id: 'reserve',
      label: 'Reserve in store',
      disableIfOutOfStock: true,
      hideWhenDisabled: true,
      data: { flow: 'reservation' },
    },
  ],
};

document.querySelector('unify-store-availability-widget').addEventListener('dialog-opened', (event) => {
  console.log('Dialog is', event.detail.open ? 'open' : 'closed');
});

{
  open: boolean  // true when opened, false when closed
}

document.querySelector('unify-store-availability-widget').addEventListener('store-pickup', (event) => {
  console.log('Store selected:', event.detail.location.name);
  console.log('Item:', event.detail.itemId);
});

{
  itemId: string,        // The item ID passed to the widget
  source: 'location',    // Always 'location'
  location: {            // Raw store object as returned by the API
    id: string,
    name: string,
    address: string,
    zip_code: string,
    city: string,
    distance: number,
    phone_number: string,
    stock: { quantity: number, status: string },
    opening_hours: { /* ... */ },
    click_and_go: boolean
  },
  store: {               // Normalized summary (camelCase, safe defaults)
    id: string | null,
    name: string | null,
    address: string | null,
    zipCode: string | null,
    city: string | null,
    phoneNumber: string | null,
    clickAndGo: boolean,
    closed: boolean,
    stockQuantity: number
  }
}

document.querySelector('unify-store-availability-widget').addEventListener('store-custom-cta-clicked', (event) => {
  const { cta, store } = event.detail;
  console.log('CTA clicked:', cta.id, 'for store', store.name);
});

{
  itemId: string,
  source: 'location',
  location: { /* raw store object */ },
  store: { /* normalized summary — see store-pickup */ },
  cta: {
    id: string,          // Normalized CTA id
    label: string,       // Resolved label (falls back to customStoreCtaDefaultLabel)
    index: number,       // Position in the customStoreCtas array
    data: object | null  // The `data` payload from the CTA descriptor
  }
}

const widget = document.querySelector('unify-store-availability-widget');

widget.config = {
  dialogTitle: 'Find in store',
  storeOpenLabel: 'Open now',
  storeClosedLabel: 'Closed',
  maxRange: 25,
  locale: 'en-US',
};

// Open the search dialog
widget.open = true;

const widget = document.querySelector('unify-store-availability-widget');

widget.config = {
  dialogTitle: 'Availability near you',
  showClickAndGoInfo: true,
  showStorePickupButton: true,
  storePickupButtonLabel: 'Order for pickup',
  maxRange: 30,
};

// Handle store pickup action
widget.addEventListener('store-pickup', (event) => {
  const { location, itemId } = event.detail;
  console.log(`User selected ${location.name} for item ${itemId}`);
  // Send to your backend or order system
});

widget.open = true;

const widget = document.querySelector('unify-store-availability-widget');

widget.config = {
  customStoreCtas: [
    { id: 'directions', label: 'Get directions' },
    {
      id: 'reserve',
      label: 'Reserve in store',
      disableIfOutOfStock: true,
      data: { flow: 'reservation' },
    },
  ],
};

widget.addEventListener('store-custom-cta-clicked', (event) => {
  const { cta, store } = event.detail;
  if (cta.id === 'directions') {
    window.open(`https://maps.google.com/?q=${encodeURIComponent(store.address)}`);
  } else if (cta.id === 'reserve') {
    startReservation(store, cta.data);
  }
});

widget.open = true;

<style>
  unify-store-availability-widget {
    /* Colors */
    --unify-dialog-bg: #f8f9fa;
    --unify-dialog-color: #212529;
    --unify-backdrop-bg: rgba(0, 0, 0, 0.6);
    
    /* Store status */
    --unify-store-status-open-color: #28a745;
    --unify-store-status-closed-color: #dc3545;
    
    /* Buttons */
    --unify-geolocate-button-bg: #007bff;
    --unify-geolocate-button-color: white;
    
    /* Spacing & sizing */
    --unify-input-border-radius: 8px;
    --unify-dialog-width: 700px;
  }
</style>

<unify-store-availability-widget
  api-key="your-api-key"
  item-id="your-item-id"
></unify-store-availability-widget>