npm package: @heseya/store-vue
Description: ## Instalation
Latest version: 3.0.1

# @heseya/store-vue

## Instalation

```bash
$ yarn add @heseya/store-core @heseya/store-vue
// or
$ npm i @heseya/store-core @heseya/store-vue
```

## Usage

TODO

## Variables

You need to add following code to your root css stylesheet. There you can set colors to be used by library

```css
:root {
  --primary-color: #aaa;
  --secondary-color: #aaa;
  --gray: #aaa;
  --error-color: #aaa;

  --header-font-family-family: 'Lato';
  --text-font-family: 'Lato';
}
```

If You'd like to change default colors of texts and buttons/boxes in `<hs-checkout>` component, please add this variable set to `:root` selector

```css
:root {
  --hs-checkout-price-initial-color: #aaa;
  --hs-checkout-price-discount-color: #aaa;
  --hs-checkout-price-color: #aaa;

  --hs-checkout-label-color: #aaa;
  --hs-checkout-value-color: #aaa;

  --hs-checkout-submit-background: #aaa;
  --hs-checkout-submit-background-hover: #aaa;
  --hs-checkout-submit-color: #aaa;
  --hs-checkout-submit-color-hover: #aaa;

  --hs-checkout-button-link-background: #aaa;
  --hs-checkout-button-link-background-hover: #aaa;
  --hs-checkout-button-link-color: #aaa;
  --hs-checkout-button-link-color-hover: #aaa;

  --hs-checkout-sale-background: #aaa;
  --hs-checkout-sale-color: #aaa;
  --hs-checkout-sale-button-background: #aaa;
  --hs-checkout-sale-button-background-hover: #aaa;
  --hs-checkout-sale-button-color: #aaa;
  --hs-checkout-sale-button-color-hover: #aaa;
}
```

## `<hs-checkout>` customization

Every section of `<hs-checkout>` component can be replace with a custom one just by placing it in `<template #section-name>`.
Here's list of every customizable section and explanation of its props:

1. **delivery-country** receives:

   1. `value` - value of currently choosen country e.g. **PL**
   2. `countries` - list of all avaiable countries (array)
   3. `l` - translations for **noCountrySelected** and **deliveryCountry** (object)
   4. `change` - event for change currently choosen country, takes **country code** as parameter e.g. **PL**

2. **delivery-methods** receives:

   1. `value` - id of currently choosen delivery method e.g. **afc3d72a-68f7-46d9-9c09-2dee35a49816**
   2. `methods` - list of available shipping methods (array)
   3. `l` - translations for **deliveryMethod, noDeliveryMethods, deliveryIn, days** (object)
   4. `change` - event for change currently choosen shipping method, takes **id** as parameter

3. **delivery-address** receives:

   1. `value` - whole **form** object
   2. `allowInvoice` - **true** if invoice is allowed, **false** otherway
   3. `isInvoice` - currently state of **isInvoice** (boolean)
   4. `l` - translations with structure of: `address, invoice, form: { name, address: formAddress, postCode, city, email, phone, comment }`
   5. `update` - event for update delivery address, takes **form** object
   6. `switchInvoice` - event for switch visibility of invoice form, **takes no arguments**

4. **delivery-address-invoice** receives:

   1. `formData` - whole **form.invoiceAddress** object
   2. `l` - translations with structure of: `invoiceDetails, form: { companyName, companyAddress, postCode, city, vat }`
   3. `update` - event for update invoice address, takes **form.invoiceAddress** object

5. **delivery-state-checkout** receives:

   1. `isAccepted` - value of **isStatuteAccepted** (boolean)
   2. `l` - translations with structure of: `consets, statute: { accept, statute }`
   3. `switch` - event for switch statute acceptation, **takes no arguments**

6. **items** receives:

   1. `items` - list of products in the cart (array)
   2. `lock` - **true** if child component(`<cart-item>`) is **not** allowed to be removed or its quantity can't be modified, **false** otherway

7. **coupon-code** receives:

   1. `coupon-code` - coupon code e.g. **301H8WWC** (string)
   2. `cartValue` - **total** value of products in the cart **(with sales applied)**
   3. `l` - translations with structure of: `{ label, applied, codeDoesNotExists, codeUnavaliable} `
   4. `coupon` - event for coupon apply, takes **coupon object**

8. **summary-coupons** receives:

   1. `coupons` - list of applied coupons **(array of coupon objects)**
   2. `title` - translation of `appliedCoupons`
   3. `couponRemove` - event for coupon remove, takes **id** of coupon e.g. **07133fe8-6b42-4527-8edf-66df8c064874** (string)

9. **summary-sales** receives:

   1. `sales` - list of sales (array)
   2. `title` - translation of `appliedSales`

10. **summary-details** receives:

    1. `cartTotalInitial` - **total** value of products in the cart (**without** sales applied)
    2. `cartTotalDiscount` - **total** value of discount
    3. `shippingPriceInitial` - **initial** value of shipping
    4. `shippingPriceDiscount` - **discounted** value of shipping
    5. `totalOrderAmount` - **final value of order**
    6. `l` - translation with structure of: `{ cart, discount, delivery, total }`

11. **summary-buttons** receives:

    1. `isLoading` - (boolean)
    2. `disabled` - (boolean)
    3. `backToShopLink` - URL to main page
    4. `l` - translation with structure of: `{ buy, return: returnToShopUrl }`