@uzum-tech/account-form NPM

Installing
Usage
License

Installing

Package manager

Using npm:

npm i @uzum-tech/account-form

Using yarn:

yarn add @uzum-tech/account-form

CDN

Using jsDelivr

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@uzum-tech/account-form/lib/style.css">
<script src="https://cdn.jsdelivr.net/npm/@uzum-tech/account-form/lib/main.iife.js"></script>

Using unpkg

<link rel="stylesheet" href="https://unpkg.com/@uzum-tech/account-form/lib/style.css">
<script src="https://unpkg.com/@uzum-tech/account-form/lib/main.iife.js"></script>

Usage

Initialization

Default value source: 1

HTML

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div data-account-form data-source="-1" style="width: 530px"></div>
  </body>
</html>

Script

import '@uzum-tech/account-form/lib/style.css';
import AccountForm from '@uzum-tech/account-form';

new AccountForm('[data-account-form]');

Add/Remove listeners

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

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

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

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

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

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

import AccountForm from '@uzum-tech/account-form';

const accountForm = new AccountForm();

accountForm.onResponse = (response: ApiResponse<ELMAResponse>): 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.

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

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

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

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();