# Uso

```
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/apirocket@_VERSION_/dist/ecommerce.css">
<script src="https://cdn.jsdelivr.net/npm/apirocket@_VERSION/dist/ecommerce.js" defer></script>
```


### Inicializar el ecommerce

```javascript

    document.addEventListener('apirocket.ecommerce.ready', (event: EcommerceReadyEvent) => {

        event.ecommerce.config (EcommerceConfig)
    });
```

### Actions

- cart-add-item
- cart-open
- customer-account
- checkout-open
- sales-account


### EcommerceReadyEvent

```javascript
interface EcommerceReadyEvent extends Event {
    ecommerce: PublicEcommerceService
}
```


### PublicEcommerceService

```javascript
type PublicEcommerceService = {
    customer: CustomerService,
    cart: CartService,
    config: (value: EcommerceConfig) => void
}
```

### EcommerceConfig

```javascript
type EcommerceConfig = {
    countryIso?: string;
    debug?: DebugType | Array <DebugType> = '';
    defaultPriceListId?: number;
    customerFilterType: '' | 'B2B' | 'B2C' = '';
    ecommerceId: string;
    locale?: string: 'es' | 'en' | 'de' | 'fr';
    logo?: string;
    legalLinks?: LegalLinks;
    pricesTaxIncluded?: boolean = true;
    stage?: Stage = 'production';
}
```

### Eventos
- apirocket.ecommerce.updateEvents
- apirocket.cartitem-loaded

### CartItemLoadedEvent

Se lanza por cada ítem del carrito cuando su componente está disponible en el DOM.
El target del evento es el contenedor disponible para customizar

```javascript
interface CartItemLoadedEvent extends CustomEvent {
    detail: CartItem;
}
```

```javascript
document.addEventListener('apirocket.cartitem-loaded', (event: CartItemLoadedEvent) => {
    const item = event.detail;

    // ...
});
```


### DebugType

```javascript
type DebugType = 'all' | 'analytics'
```

### LegalLinks

```javascript
type LegalLinks = {
    refundPolicy?:  LegalLink,
    privacyPolicy?: LegalLink,
    termsAndConditions?: LegalLink
}

type LegalLink = {
    label?: string;
    link?: string;
}
```


### CustomerService

```javascript
interface ReadOnly <CustomerService> {
    acceptEmailMarketing: boolean;
    email: string;
    firstName: string;
    id: number;
    lastName: string;
    phone: string;
    type: 'B2B' | 'B2C';
    isLogged: boolean;

    countries: () => Promise <Array <Countries>>;
    createBillingAddress: (input: Omit <BillingAddress, 'id'>) => Promise <BillingAddress>;
    createShippingAddress: (input: Omit <ShippingAddress, 'id'>) => Promise <ShippingAddress>;
    deleteShippingAddress: (id: number) => Promise <boolean>;
    login: (email: string, password: string) => customer.login (email, password): { status: number, token?: string, customer?: CustomerData };
    logout: () => customer.logout ();
    myAccount: () => Promise <CustomerAccount>;
    price: (productId: number) => Promise <ProductPrice>;
    orders: (filter: OrdersFilter = {}) => Promise <Array <Order>>;
    order: (id: number) => Promise <Order>;
    states: (countryId: number) => Promise <Array <State>>;
    subscribe: (cb: (customer: CustomerService) => void);
    updateMyAccount: (input: InputUpdateAccount) => Promise <boolean>;
    updatePassword: (oldPassword: string, newPassword: string) => Promise <boolean>;
    updateBillingAddress: (input: BillingAddress) => Promise <BillingAddress>;
    updateShippingAddress: (input: ShippingAddress) => Promise <ShippingAddress>;
}
```


### CustomerData
```javascript
type CustomerData = {
    acceptEmailMarketing: boolean,
    email: string,
    firstName: string,
    id: number,
    lastName: string,
    phone: string,
    type: CustomerType
};
```

### CartService

```javascript
interface ReadOnly <CartService> {
    count: number;
    country: Country;
    numItems: number;
    taxAmount: number;
    taxBase: number;
    total: number;
    units: number;

    add: (data: CartAddItem) => void;
    clear: () => void;
    close: () => void;
    items: () => Array <CartItem>;
    open: (fullScreen: boolean) => void;
    removeItem: (item: any) => void;
    setCountryIso: (iso: string) => void,
    subscribe: (cb: (cart: CartService) => void);
    updateItem: (item: any, quantity: number) => void;
}
```


### Tipos


```javascript
type CartAddItem = {
    cartFullScreen?: boolean;
    customPayload?: any;
    id: number;
    description?: string;
    groupProduct?: boolean;
    image?: string;
    name?: string;
    url?: string;
    quantity: number;
}
```


```javascript
type CartItem = {
    id: number;
    product: {
        barcode: string;
        category: {
            id: number,
            name: string
        },
        description: string;
        id: number;
        image: string;
        name: string;
        noShippingCost: boolean,
        sku: string,
        stockManagement: boolean,
        url: string;
        weight: number;
    },
    itemPrice: {
        comparePrice: number;
        comparePriceTaxAmount: number;
        comparePriceTaxBase: number;
        taxAmount: number;
        taxBase: number;
        // taxes
    }
    priceTaxBase: number;
    priceTaxAmount: number;
    quantity: number;
    uuid: string;
}
```


```javascript
type ShippingAddress {
    address: string;
    address2?: string;
    city: string;
    country: { id: number; name?: string; iso?: string };
    description: string;
    firstName: string;
    id: number;
    lastName: string;
    phone: string;
    postalCode?: string;
    state: State
}
```

```javascript
type State = {
    name?: string;
    id: number;
}
```

```javascript
type InputUpdateAccount = {
    acceptEmailMarketing: boolean;
    firstName: string;
    lastName: string;
    phone: string;
}
```


```javascript
interface CustomerAccount {
    acceptEmailMarketing?: boolean;
    billingAddress?: BillingAddress;
    custom?: any;
    email?: string
    firstName?: string;
    lastName?: string;
    phone?: string;
    shippingAddress?: Array <AccountShippingAddress>;
}
```

```javascript
interface BillingAddress {
    address: string;
    address2: string;
    city: string;
    country: Country
    default: boolean;
    description: string;
    id: number;
    name: string;
    phone: string;
    postalCode: string;
    state: State;
    taxCode: string;
}
```


```javascript
interface AccountShippingAddress {
    address: string;
    address2: string;
    city: string;
    country: Country;
    default: boolean;
    description: string;
    firstName: string;
    id: number;
    lastName: string;
    name: string;
    phone: string;
    postalCode: string;
    state: {
        name: string;
        id: number;
    }
}
```


```javacript
interface ProductPrice {
    comparePrice: number;
    comparePriceTaxBase: number;
    comparePriceTaxAmmount: number;
    taxAmount: number;
    taxBase: number;
    taxes: Array <any>;
}
```


```javascript
interface Order extends CustomerOrder {
    billingAddres; OrderBillingAddress;
    cartTaxAmount: number;
    cartTaxBase: number;
    customer: OrderCustomer;
    customerOrder: string;
    date: string;
    discount: Array <OrderDiscount>;
    geolocation: OrderGeolocation;
    id: number;
    items: Array <OrderItem>;
    notes: string;
    number: string;
    payment: OrderPayment;
    pricesTaxIncluded: boolean;
    shippingAddress: OrderShippingAddress;
    shippingMethod: OrderShippingMethod;
    status: OrderStatus;
    totalTaxAmount: number;
    totalTaxBase: number;
    total: number;
}
```


```javascript
interface OrderBillindAddress {
    address?: string;
    address2?: string;
    city?: string;
    country?: Country;
    description?: string;
    id?: number;
    name?: string;
    phone?: string;
    postalCode?: string;
    state?: { id: number; name: string };
    taxCode?: string
}
```


```javascript
interface  OrderCustomer {
    code: string;
    email: string;
    id: number;
    isLogged: boolean;
    name: string;
    phone: string;
    priceList: { id: number; name: string }
    type: 'B2B' | 'B2C';
}
```


```javascript
interface OrderDiscount {
    codes: Array <any>;
    taxAmount: number;
    taxBase: number;
    total: number;
}
```


```javascript
interface OrderGeolocation {
    browser: { name: string, version: string };
    city: string;
    continent: string;
    country: string;
    device: { type: string; model: string; vendor: string };
    ip: string;
    lat: number;
    lon: number;
    os: { name: string; version: string };
    postalCode: string;
    region: string;
    remoteAddress: string;
    timeZone: string;
    userAgent: string;
    userIsp: string;
}
```

```javascript
interface OrderItem {
    id: number;
    price: number;
    priceTaxAmount: number;
    priceTaxBase: number;
    product: OrderProduct;
    quantity: number;
    taxes: any;
}
```


```javascript
type OrderPayment = {
    authorization: string;
    method: {
        id: number;
        name: string;
        type: PaymentType;
        notes: string;
        description: string;
    }
    total: number;
}
```


```javascript
interface OrderProduct {
    barcode: string;
    category: {
        id: number,
        name: string
    },
    description: string;
    id: number;
    image: string;
    name: string;
    noShippingCost: boolean,
    sku: string,
    stockManagement: boolean,
    url?: string;
    weight: number;
}
```

```javascript
type OrdersFilter = {
    page?: number;
    perPage?: number;
}
```


```javascript
interface OrderShippingAddress {
    address?: string;
    address2?: string;
    city?: string;
    country?: Country;
    description?: string;
    email?: string;
    firstName?: string;
    id?: number;
    lastName?: string;
    phone?: string;
    postalCode?: string;
    state?: { id: number; name: string };
}
```


```javascript
interface OrderShippingMethod {
    description: string;
    id: number;
    name: string;
    taxAmount: number;
    taxBase: number;
    taxes: Array <any>;
    total: number;
}
```


```javascript
type OrderStatus = {
    id: number;
    name: string;
    color: string;
}
```


###

### Ejemplo

```javascript
document.addEventListener('apirocket.ecommerce.ready', (event: EcommerceReadyEvent) => {

    event.ecommerce.config ({
        ecommerceId: 'ECOMMERCE_ID',
        debug: 'all',
    })
});
```