@debugged-development/ticketapp-sdk 0.0.3

package/README.md

@@ -0,0 +1,196 @@
+# Basket Manager Usage Guide
+
+## Installation
+
+```bash
+npm install @your-scope/basket-manager luxon
+```
+
+## Setup
+
+You need to provide your GraphQL API client when initializing the BasketService:
+
+```typescript
+import { BasketService, store } from '@your-scope/basket-manager';
+import { ApolloClient } from '@apollo/client';
+
+// Your GraphQL mutations (from your generated types)
+import {
+  useAddToOrderMutation,
+  useRemoveFromOrderMutation,
+  useConfigurePackageMutation,
+  useConfigureOrderDeliveryOptionMutation,
+  useCreateOrderCustomerMutation,
+  useDeleteOrderMutation,
+} from './order-provider.generated';
+
+// Create API client wrapper
+const apiClient = {
+  addToOrder: async (variables) => {
+    const [mutate] = useAddToOrderMutation();
+    return await mutate({ variables });
+  },
+  removeFromOrder: async (variables) => {
+    const [mutate] = useRemoveFromOrderMutation();
+    return await mutate({ variables });
+  },
+  configurePackage: async (variables) => {
+    const [mutate] = useConfigurePackageMutation();
+    return await mutate({ variables });
+  },
+  configureDeliveryOption: async (variables) => {
+    const [mutate] = useConfigureOrderDeliveryOptionMutation();
+    return await mutate({ variables });
+  },
+  createCustomer: async (variables) => {
+    const [mutate] = useCreateOrderCustomerMutation();
+    return await mutate({ variables });
+  },
+  cancelOrder: async (variables) => {
+    const [mutate] = useDeleteOrderMutation();
+    return await mutate({ variables });
+  },
+};
+
+// Initialize the basket service
+const basketService = new BasketService({
+  shopId: 'your-shop-id',
+  shopSlug: 'your-shop-slug',
+  apiClient,
+});
+```
+
+## Usage in React
+
+```typescript
+import { useEffect, useState } from 'react';
+import { store, Currency } from '@your-scope/basket-manager';
+
+function MyComponent() {
+  const [order, setOrder] = useState(store.getState().basket.order);
+
+  // Subscribe to store changes
+  useEffect(() => {
+    const unsubscribe = store.subscribe(() => {
+      setOrder(store.getState().basket.order);
+    });
+    return unsubscribe;
+  }, []);
+
+  const handleAddProduct = async () => {
+    await basketService.addProduct({
+      id: 'product-123',
+      name: 'My Product',
+      price: 29.99,
+      currency: Currency.EUR,
+      amount: 1,
+    });
+  };
+
+  return (
+    <div>
+      <h1>Basket</h1>
+      {order && (
+        <div>
+          <p>Order ID: {order.id}</p>
+          <p>Items: {order.items.length}</p>
+        </div>
+      )}
+      <button onClick={handleAddProduct}>Add Product</button>
+    </div>
+  );
+}
+```
+
+## Usage in Vue
+
+```typescript
+import { ref, onMounted, onUnmounted } from 'vue';
+import { store, Currency } from '@your-scope/basket-manager';
+
+export default {
+  setup() {
+    const order = ref(store.getState().basket.order);
+    let unsubscribe;
+
+    onMounted(() => {
+      unsubscribe = store.subscribe(() => {
+        order.value = store.getState().basket.order;
+      });
+    });
+
+    onUnmounted(() => {
+      if (unsubscribe) unsubscribe();
+    });
+
+    const handleAddProduct = async () => {
+      await basketService.addProduct({
+        id: 'product-123',
+        name: 'My Product',
+        price: 29.99,
+        currency: Currency.EUR,
+        amount: 1,
+      });
+    };
+
+    return { order, handleAddProduct };
+  }
+};
+```
+
+## Usage in Vanilla JS
+
+```typescript
+import { store, basketService, Currency } from '@your-scope/basket-manager';
+
+// Subscribe to changes
+store.subscribe(() => {
+  const order = store.getState().basket.order;
+  console.log('Order updated:', order);
+  updateUI(order);
+});
+
+// Add product
+document.querySelector('#add-btn').addEventListener('click', async () => {
+  await basketService.addProduct({
+    id: 'product-123',
+    name: 'My Product',
+    price: 29.99,
+    currency: Currency.EUR,
+    amount: 1,
+  });
+});
+
+function updateUI(order) {
+  const orderElement = document.querySelector('#order-display');
+  if (order) {
+    orderElement.innerHTML = `
+      <p>Order ID: ${order.id}</p>
+      <p>Items: ${order.items.length}</p>
+    `;
+  }
+}
+```
+
+## API Methods
+
+### `addProduct(input: ProductInput)`
+Add a product to the basket.
+
+### `removeProduct(input: ProductInput)`
+Remove a product from the basket.
+
+### `configurePackage(input: PackageInput)`
+Configure a package in the basket.
+
+### `configureDeliveryOption(input?: DeliveryInput)`
+Set or remove delivery option.
+
+### `createCustomer(input: CreateCustomerInput)`
+Add customer information to the order.
+
+### `cancelOrder()`
+Cancel the current order.
+
+### `clearOrderFromSession()`
+Clear the order from session storage and state.