# JavaScript-horgok a foglalási űrlapokon

> A foglalási űrlap frontend-eseményeire reagáló JavaScript-horgok: űrlap betöltése, kiválasztások, egyéni ellenőrzés, foglalás előtt és után.

Az Amelia JavaScript-horgokkal reagálhatsz a látogatók műveleteire és a foglalási folyamat eseményeire a frontenden. Használhatod őket interakciók követésére, adatok ellenőrzésére, a működés módosítására vagy egyedi logika indítására, az Amelia magkódjának módosítása nélkül.

A horgok használatához programozási ismeret kell, a támogatás csak általános útmutatásra terjed ki.

A horgok csak a következő foglalási és katalógus űrlapokon futnak:

- `[ameliastepbooking]`
- `[ameliacatalogbooking]`

## A horgok paraméterei

Minden JavaScript-horog ugyanazokat a paramétereket kapja:

| Paraméter | Leírás |
|---|---|
| `success` | Visszahívó függvény a folyamat folytatásához. Csak a `beforeBooking` horognál használatos. |
| `error` | Visszahívó függvény a folyamat leállításához. Csak a `beforeBooking` horognál használatos. |
| `data` | Az aktuális lépéshez tartozó foglalási, időponti vagy űrlapadatokat tartalmazó objektum. |

A horgokat a `window.ameliaActions` objektumban kell megadnod, a horog nevével egyező kulccsal. Az alábbi minta a szerkezetet mutatja (a `ViewContent` helyére bármelyik horog neve kerülhet):

```javascript
window.ameliaActions = {
  ViewContent: function (success = null, error = null, data) {
    console.log('ViewContent HOOK')
    console.log(data)
  }
}
```

## A horgok listája

| Horog | Mikor fut le |
|---|---|
| `ViewContent` | Miután a foglalási űrlap betöltődött. |
| `SelectService` | Amikor a látogató kiválaszt vagy módosít egy szolgáltatást. |
| `SelectCategory` | Amikor kiválaszt vagy módosít egy kategóriát. |
| `SelectEmployee` | Amikor kiválaszt vagy módosít egy munkavállalót. |
| `SelectLocation` | Amikor kiválaszt vagy módosít egy helyszínt. |
| `SelectPackage` | Amikor kiválaszt vagy módosít egy csomagot. |
| `InitInfoStep` | Amikor a vásárlói adatok lépése betöltődik. |
| `customValidation` | A vásárlói adatok lépésének ellenőrzésekor, a fizetési lépés betöltése előtt. |
| `InitiateCheckout` | Amikor a fizetési lépés betöltődik. |
| `beforeBooking` | A megerősítő gomb megnyomásakor, a foglalás véglegesítése előtt. |
| `Schedule` | Helyszíni fizetésű foglalás befejezése után, a köszönő lépés betöltése előtt. |
| `Purchase` | Online fizetésű foglalás befejezése után, a köszönő lépés betöltése előtt. |

## Egyéni ellenőrzés a fizetés előtt

A `customValidation` horog a vásárlói adatok lépésének ellenőrzésekor fut le. A `data.rules` objektumhoz saját szabályt adhatsz egy mezőre: az e-mail-mezőhöz a `data.rules.email`, egy egyéni mezőhöz a `data.rules['cf' + azonosito]` tömbbe.

```javascript
window.ameliaActions = {
  customValidation: function (success = null, error = null, data) {
    const customValidator = (rule, value, callback) => {
      if (value.includes('SOME_REGEX')) {
        callback(new Error())
      } else {
        callback()
      }
    }

    // az e-mail-mező ellenőrzése
    data.rules.email.push({
      message: 'Egyéni hibaüzenet',
      validator: customValidator
    })

    // egy egyéni mező ellenőrzése (itt a 2-es azonosítójú mező)
    var customFieldId = 2
    data.rules['cf' + customFieldId].push({
      message: 'Egyéni hibaüzenet',
      validator: customValidator
    })
  }
}
```

## Logika a foglalás létrehozása előtt

A `beforeBooking` horog a megerősítő gomb megnyomásakor fut le, még a foglalás véglegesítése előtt. A foglalás csak akkor folytatódik, ha meghívod a `success()` függvényt; ha le akarod állítani, hívd az `error()` függvényt.

Ez a horog Mollie és WooCommerce fizetésnél nem érhető el.

```javascript
window.ameliaActions = {
  beforeBooking: function (success = null, error = null, data) {
    console.log('A foglalás létrehozása előtt')
    console.log(data)

    // a success() meghívásával engedélyezed a foglalás befejezését
    success()
  }
}
```