[](https://www.npmjs.com/package/@uzum-tech/account-form)
[](https://www.npmjs.com/package/@uzum-tech/account-form)
## Table of Contents
* [Installing](#installing)
* [Usage](#usage)
* [Initialization](#initialization)
* [Add/Remove listeners](#addremove-listeners)
* [Fields visibility](#fields-visibility)
* [Default values](#default-values)
* [Custom request sending](#custom-request-sending)
* [Toggle pinfl](#toggle-pinfl)
* [API Version](#api-version)
* [Custom response callback](#custom-response-callback)
* [Update text for send button](#update-text-for-send-button)
* [Computed values](#computed-values)
* [Status alerts](#status-alerts)
* [Manual submitting](#manual-submitting)
* [Reset](#reset)
* [License](#license)
## Installing
### Package manager
Using npm:
```bash
npm i @uzum-tech/account-form
```
Using yarn:
```bash
yarn add @uzum-tech/account-form
```
### CDN
Using jsDelivr
```html
```
Using unpkg
```html
```
## Usage
### Initialization
Default value source: 1
HTML
```html
```
Script
```ts
import '@uzum-tech/account-form/lib/style.css';
import AccountForm from '@uzum-tech/account-form';
new AccountForm('[data-account-form]');
```
### Add/Remove listeners
```ts
import AccountForm, { AccountFormEvent, AccountApplication } from '@uzum-tech/account-form';
const accountForm = new AccountForm();
const handleAccountFormSubmit = (payload: AccountApplication) => console.log(payload);
// Add listener
accountForm.addListener(
AccountFormEvent.SUBMIT,
handleAccountFormSubmit
);
// Remove listener
accountForm.removeListener(
AccountFormEvent.SUBMIT,
handleAccountFormSubmit
);
// Remove all listener
accountForm.removeAllListeners(
AccountFormEvent.SUBMIT,
handleAccountFormSubmit
);
```
Events from `AccountFormEvent`:
| Value | Payload | Description |
|--|----------------------------------------|---------------------------------------------------------------------------------------------------------------------------|
| SUBMIT | AccountApplication | Will fire after successful validation, before sending the request |
| ERROR_RESPONSE | AccountApplication | Will fire after an unsuccessful response |
| SUCCESS_RESPONSE | AccountApplication | Will fire after a successful response |
| FINALLY_RESPONSE | AccountApplication | It will always work after the response |
| VALIDATE | AccountApplicationFormValidationResult | It will work after the form is validated, before sending the request. Validation status is available in the event payload |
| BLUR | AccountApplicationFieldBlurResult | Will fire after removing focus from any field inside the form |
| TOGGLE_TIN_OR_PINFL | boolean | Will fire after toggle 'Не помню ИНН или ПИНФЛ' checkbox |
| TOGGLE_ACCEPT_CHECKBOX | boolean | Will fire after toggle 'Я соглашаюсь на обработку персональных данных' checkbox |
### Fields visibility
```ts
import AccountForm from '@uzum-tech/account-form';
const accountForm = new AccountForm();
// Show/hide single field
accountForm.showFields('name');
accountForm.hideFields('name');
// Show/hide multiple fields
accountForm.showFields('name', 'phone');
accountForm.hideFields('name', 'phone');
```
### Default values
```ts
import AccountForm, { AccountProduct } from '@uzum-tech/account-form';
const accountForm = new AccountForm();
accountForm.setDefaultFields({
product: AccountProduct.ACCOUNT_IN_SOUMS
});
```
### Custom request sending
- If you return a non-empty string, it will be displayed as error text.
- If nothing is returned, the response will be considered successful
```ts
import AccountForm, { AccountApplication } from '@uzum-tech/account-form';
const accountForm = new AccountForm();
accountForm.onRequest = (payload: AccountApplication) => {
// Logic for sending the request
};
```
### Toggle pinfl
- updates the mask
- updates localization
- if necessary, trims the original field value
- emits the event `TOGGLE_ACCEPT_CHECKBOX`
```ts
import AccountForm from '@uzum-tech/account-form';
const accountForm = new AccountForm();
// To support both INN and PINFL
accountForm.withPinfl();
// To leave only the INN
accountForm.withoutPinfl();
```
### API Version
- by default version is 2.0
- version will send in header `X-Api-Version`
```ts
import { ApiVersion } from '@uzum-tech/account-form';
const accountForm = new AccountForm();
// Change version
accountForm.apiVersion = ApiVersion.v3; // Available keys - v1-v4
// Clear version in order to remove X-Api-Version header
accountForm.apiVersion = undefined;
```
### Custom response callback
- If you want to handle the response you can pass the function
```ts
import AccountForm from '@uzum-tech/account-form';
const accountForm = new AccountForm();
accountForm.onResponse = (response: ApiResponse): void => {
// Logic for handling the response
};
```
### Update text for send button
- If you want to update text of send button, you can use method `setSendButtonLocale`
- The method accepts `text` as a text, that should be replaced
- BE CAREFULL: After changing text, there will be no 'reactive' locale on button.
That means that changing language will not force any changing in text.
```ts
import AccountForm from '@uzum-tech/account-form';
const accountForm = new AccountForm();
accountForm.setSendButtonLocale('Book a call');
```
### Computed values
| Property | Type | Readonly |
|-|-|-|
| acceptChecked | boolean | Yes |
| hideTINOrPINFLChecked | boolean | Yes |
| lang | string | No |
| productValue | AccountProduct \| null | No |
| buttonLoading | boolean | No |
### Status alerts
```ts
import AccountForm from '@uzum-tech/account-form';
const accountForm = new AccountForm();
// If you don't need to show alert then change the value to false
accountForm.autoShowAlert = false;
```
### Manual submitting
```ts
import AccountForm from '@uzum-tech/account-form';
const accountForm = new AccountForm();
// If you need submit with validations and all other handlers
accountForm.submit();
// If you need request only without handlers
accountForm.requestOnly();
```
### Reset
```ts
import AccountForm from '@uzum-tech/account-form';
const accountForm = new AccountForm();
// If you need disable auto reset after submit
accountForm.autoReset = false;
// If you need reset manually
accountForm.resetForm();
```
## License
[MIT license](https://opensource.org/licenses/MIT)
