@liquidcommerce/elements-sdk 2.7.0 → 2.7.1

package/docs/v1/api/actions/address-actions.md

@@ -0,0 +1,281 @@
+# Address Actions API
+
+Address actions allow you to programmatically manage the delivery location.
+
+## actions.address.setAddressByPlacesId()
+
+Set address using a Google Places ID.
+
+### Signature
+
+```typescript
+setAddressByPlacesId(placesId: string): Promise<void>
+```
+
+### Parameters
+
+| Parameter | Type | Required | Description |
+|-----------|------|----------|-------------|
+| `placesId` | string | Yes | Google Places ID |
+
+### Example
+
+```javascript
+await window.elements.actions.address.setAddressByPlacesId(
+  'ChIJOwg_06VPwokRYv534QaPC8g'
+);
+```
+
+### How to Get Places ID
+
+Visit [Google Place IDs](https://developers.google.com/maps/documentation/places/web-service/place-id#find-id) for details on obtaining a Places ID.
+
+---
+
+## actions.address.setAddressManually()
+
+Set address manually without Google Places.
+
+### Signature
+
+```typescript
+setAddressManually(
+  address: IAddressAddress,
+  coordinates: IAddressCoordinates
+): Promise<void>
+```
+
+### Parameters
+
+```typescript
+interface IAddressAddress {
+  one: string;    // Street address
+  two?: string;   // Apt, suite, etc. (optional)
+  city: string;   // City name
+  state: string;  // Two-letter state code
+  zip: string;    // ZIP/postal code
+}
+
+interface IAddressCoordinates {
+  latitude: number;   // -90 to 90
+  longitude: number;  // -180 to 180
+}
+```
+
+### Example
+
+```javascript
+await window.elements.actions.address.setAddressManually(
+  {
+    one: '123 Main Street',
+    two: 'Apt 4',
+    city: 'New York',
+    state: 'NY',
+    zip: '10001'
+  },
+  {
+    latitude: 40.7128,
+    longitude: -74.0060
+  }
+);
+```
+
+### Validation
+
+The SDK validates:
+- All required fields are present
+- State is 2-letter code
+- Latitude is between -90 and 90
+- Longitude is between -180 and 180
+
+### Errors
+
+**Throws `SDKError` if:**
+- Required fields are missing
+- Coordinates are out of range
+- Address format is invalid
+
+---
+
+## actions.address.clear()
+
+Remove the current address.
+
+### Signature
+
+```typescript
+clear(): Promise<void>
+```
+
+### Example
+
+```javascript
+await window.elements.actions.address.clear();
+```
+
+### Effects
+
+- Clears stored address
+- Products will prompt for address on next add-to-cart
+- Cart/checkout require re-entering address
+
+---
+
+## actions.address.getDetails()
+
+Retrieve the current address.
+
+### Signature
+
+```typescript
+getDetails(): IAddressData | null
+```
+
+### Returns
+
+```typescript
+interface IAddressData {
+  id: string;  // Google Places ID or generated ID
+  address: {
+    one: string;
+    two?: string;
+    city: string;
+    state: string;
+    zip: string;
+  };
+  coordinates: {
+    latitude: number;
+    longitude: number;
+  };
+  formattedAddress: string;
+}
+```
+
+Returns `null` if no address is set.
+
+### Example
+
+```javascript
+const address = window.elements.actions.address.getDetails();
+
+if (address) {
+  console.log('Current address:', address.formattedAddress);
+  console.log('Coordinates:', address.coordinates);
+} else {
+  console.log('No address set');
+}
+```
+
+### Use Cases
+
+#### Check if Address is Set
+
+```javascript
+if (!window.elements.actions.address.getDetails()) {
+  // Prompt user to set address
+  showAddressPrompt();
+}
+```
+
+#### Display Current Address
+
+```javascript
+const address = window.elements.actions.address.getDetails();
+
+if (address) {
+  document.getElementById('current-address').textContent = 
+    address.formattedAddress;
+}
+```
+## Events
+
+Address actions trigger events:
+
+```javascript
+// Address updated
+window.addEventListener('lce:actions.address_updated', (event) => {
+  const { address, coordinates, formattedAddress } = event.detail.data;
+  console.log('Address set:', formattedAddress);
+});
+
+// Address cleared
+window.addEventListener('lce:actions.address_cleared', () => {
+  console.log('Address cleared');
+});
+
+// Address failed
+window.addEventListener('lce:actions.address_failed', (event) => {
+  console.error('Address error:', event.detail.data.error);
+});
+```
+
+## Best Practices
+
+### Use Places ID When Available
+
+Google Places provides accurate geocoding:
+
+```javascript
+// Good - accurate and validated
+await window.elements.actions.address.setAddressByPlacesId(placesId);
+
+// Less ideal - requires manual geocoding
+await window.elements.actions.address.setAddressManually(address, coords);
+```
+
+### Validate Manual Addresses
+
+When using manual address entry:
+
+```javascript
+async function setManualAddress(address, coords) {
+  // Validate format
+  if (!address.one || !address.city || !address.state || !address.zip) {
+    throw new Error('Missing required fields');
+  }
+  
+  // Validate state
+  if (!/^[A-Z]{2}$/.test(address.state)) {
+    throw new Error('State must be 2-letter code');
+  }
+  
+  // Validate ZIP
+  if (!/^\d{5}(-\d{4})?$/.test(address.zip)) {
+    throw new Error('Invalid ZIP code');
+  }
+  
+  await window.elements.actions.address.setAddressManually(address, coords);
+}
+```
+
+### Handle Errors
+
+```javascript
+try {
+  await window.elements.actions.address.setAddressByPlacesId(placesId);
+  showSuccess('Address saved!');
+} catch (error) {
+  console.error('Failed to set address:', error);
+  showError('Unable to set that address. Please try again.');
+}
+```
+
+### Set Address Early
+
+Set address as soon as possible in user flow:
+
+```javascript
+window.addEventListener('lce:actions.client_ready', () => {
+  if (!window.elements.actions.address.getDetails()) {
+    // Prompt for address on first visit
+    showAddressModal();
+  }
+});
+```
+
+## See Also
+
+- [Address Component Guide](../../guides/address-component.md)
+- [Address Events](../../guides/events.md#address-events)
+- [Product Component](../../guides/product-component.md#address-requirement)
+- [Cart Component](../../guides/cart-component.md#address-requirement)

package/docs/v1/api/actions/cart-actions.md

@@ -0,0 +1,337 @@
+# Cart Actions API
+
+Cart actions allow you to programmatically control the shopping cart.
+
+## actions.cart.openCart()
+
+Open the cart drawer.
+
+### Signature
+
+```typescript
+openCart(): void
+```
+
+### Example
+
+```javascript
+window.elements.actions.cart.openCart();
+```
+
+---
+
+## actions.cart.closeCart()
+
+Close the cart drawer.
+
+### Signature
+
+```typescript
+closeCart(): void
+```
+
+### Example
+
+```javascript
+window.elements.actions.cart.closeCart();
+```
+
+---
+
+## actions.cart.toggleCart()
+
+Toggle the cart drawer open/closed.
+
+### Signature
+
+```typescript
+toggleCart(): void
+```
+
+### Example
+
+```javascript
+// Add to your cart button
+document.getElementById('cart-btn').addEventListener('click', () => {
+  window.elements.actions.cart.toggleCart();
+});
+```
+
+---
+
+## actions.cart.addProduct()
+
+Add products to the cart programmatically.
+
+### Signature
+
+```typescript
+addProduct(params: IAddProductParams[], openCart?: boolean): Promise<void>
+```
+
+### Parameters
+
+| Parameter | Type | Required | Description |
+|-----------|------|----------|-------------|
+| `params` | IAddProductParams[] | Yes | Array of products to add |
+| `openCart` | boolean | No | Open cart after adding (default: false) |
+
+```typescript
+interface IAddProductParams {
+  identifier: string;      // Product UPC, SKU, or ID
+  fulfillmentType: FulfillmentType;  // 'shipping' or 'onDemand'
+  quantity: number;        // Number of items
+}
+```
+
+### Example
+
+```javascript
+// Add single product
+await window.elements.actions.cart.addProduct([
+  {
+    identifier: '00619947000020',
+    fulfillmentType: 'shipping',
+    quantity: 1
+  }
+], true);  // Open cart after adding
+
+// Add multiple products
+await window.elements.actions.cart.addProduct([
+  {
+    identifier: '00619947000020',
+    fulfillmentType: 'shipping',
+    quantity: 2
+  },
+  {
+    identifier: '08504405135',
+    fulfillmentType: 'onDemand',
+    quantity: 1
+  }
+]);
+```
+
+### Address Requirement
+
+If no address is set, the SDK automatically:
+1. Opens address input drawer
+2. Waits for user to set address
+3. Retries add-to-cart operation
+
+### Errors
+
+**Throws `SDKError` if:**
+- Identifier is invalid
+- Fulfillment type is not `'shipping'` or `'onDemand'`
+- Quantity is less than 1
+- Product is not available
+- Product is a presale item
+
+---
+
+## actions.cart.applyPromoCode()
+
+Apply a promo code to the cart.
+
+### Signature
+
+```typescript
+applyPromoCode(promoCode: string): Promise<void>
+```
+
+### Parameters
+
+| Parameter | Type | Required | Description |
+|-----------|------|----------|-------------|
+| `promoCode` | string | Yes | Promo code to apply |
+
+### Example
+
+```javascript
+try {
+  await window.elements.actions.cart.applyPromoCode('SUMMER20');
+  console.log('Promo code applied successfully');
+} catch (error) {
+  console.error('Invalid promo code:', error);
+}
+```
+
+### Notes
+
+- Code is automatically normalized (trimmed, uppercased)
+- Promo codes must be enabled in configuration
+- Only one promo code can be active at a time
+- Applying a new code replaces the existing one
+
+---
+
+## actions.cart.removePromoCode()
+
+Remove the active promo code.
+
+### Signature
+
+```typescript
+removePromoCode(): Promise<void>
+```
+
+### Example
+
+```javascript
+await window.elements.actions.cart.removePromoCode();
+```
+
+---
+
+## actions.cart.resetCart()
+
+Clear all items from the cart.
+
+### Signature
+
+```typescript
+resetCart(): Promise<void>
+```
+
+### Example
+
+```javascript
+await window.elements.actions.cart.resetCart();
+console.log('Cart cleared');
+```
+
+### Warning
+
+This permanently removes all cart items. There is no undo.
+
+---
+
+## actions.cart.getDetails()
+
+Retrieve current cart information.
+
+### Signature
+
+```typescript
+getDetails(): IBaseCartEventData
+```
+
+### Returns
+
+```typescript
+interface IBaseCartEventData {
+  cartId: string;
+  items: ICartItem[];
+  subtotal: number;  // in cents
+  total: number;     // in cents
+  itemsCount: number;
+  itemsQuantity: number;
+  promoCode?: {
+    code: string;
+    discount: number;  // in cents
+  };
+  retailers: IRetailer[];
+  // ... additional fields
+}
+```
+
+### Example
+
+```javascript
+const cart = window.elements.actions.cart.getDetails();
+
+console.log(`Cart ID: ${cart.cartId}`);
+console.log(`Items: ${cart.itemsCount}`);
+console.log(`Subtotal: $${cart.subtotal / 100}`);
+console.log(`Total: $${cart.total / 100}`);
+
+if (cart.promoCode) {
+  console.log(`Discount: $${cart.promoCode.discount / 100}`);
+}
+```
+
+### Use Cases
+
+#### Display Cart Summary
+
+```javascript
+function updateCartSummary() {
+  const cart = window.elements.actions.cart.getDetails();
+  
+  document.getElementById('cart-count').textContent = cart.itemsCount;
+  document.getElementById('cart-total').textContent = `$${cart.total / 100}`;
+}
+
+// Update on cart changes
+window.addEventListener('lce:actions.cart_updated', updateCartSummary);
+```
+
+#### Check Cart Before Checkout
+
+```javascript
+document.getElementById('checkout-btn').addEventListener('click', () => {
+  const cart = window.elements.actions.cart.getDetails();
+  
+  if (cart.itemsCount === 0) {
+    alert('Your cart is empty');
+    return;
+  }
+  
+  window.elements.actions.checkout.openCheckout();
+});
+```
+
+#### Track Cart Value
+
+```javascript
+const cart = window.elements.actions.cart.getDetails();
+
+gtag('event', 'view_cart', {
+  value: cart.total / 100,
+  currency: 'USD',
+  items: cart.items.map(item => ({
+    item_id: item.identifier,
+    quantity: item.quantity
+  }))
+});
+```
+
+## Events
+
+Cart actions trigger events that you can listen for:
+
+```javascript
+// Item added
+window.addEventListener('lce:actions.cart_item_added', (event) => {
+  console.log('Item added:', event.detail.data);
+});
+
+// Cart updated
+window.addEventListener('lce:actions.cart_updated', (event) => {
+  console.log('Cart updated:', event.detail.data);
+});
+
+// Promo code applied
+window.addEventListener('lce:actions.cart_promo_code_applied', (event) => {
+  console.log('Promo applied:', event.detail.data);
+});
+
+// Product add success
+window.addEventListener('lce:actions.cart_product_add_success', (event) => {
+  console.log('Products added:', event.detail.data);
+});
+
+// Product add failed
+window.addEventListener('lce:actions.cart_product_add_failed', (event) => {
+  console.error('Failed to add:', event.detail.data);
+});
+```
+
+See [Events Guide](../../guides/events.md) for all cart events.
+
+## See Also
+
+- [Cart Component Guide](../../guides/cart-component.md)
+- [Cart Events](../../guides/events.md#cart-events)
+- [Product Actions](./product-actions.md)
+- [Checkout Actions](./checkout-actions.md)