kwikid-components-react
Version:
KwikID's Component Library in React
948 lines (928 loc) • 29.4 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.WithValidation = exports.WithMessages = exports.Sizes = exports.Shapes = exports.Searchable = exports.NonSearchable = exports.NonClearable = exports.MultiSelect = exports.Dropdown = exports.Disabled = exports.Default = exports.CustomStyles = exports.Clearable = void 0;
var _kwikidToolkit = require("kwikid-toolkit");
var _react = _interopRequireDefault(require("react"));
var _InputMultiSelect = _interopRequireDefault(require("./InputMultiSelect"));
var _InputSelect = _interopRequireDefault(require("./InputSelect"));
var _InputSelect2 = require("./InputSelect.constants");
var _InputSelect3 = require("./InputSelect.defaults");
var _InputSelect4 = require("./InputSelect.definition");
var _InputSelect5 = require("./InputSelect.helper");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
/**
* The InputSelect component provides a dropdown menu for selecting options from a list.
* It supports single and multi-select modes, searchable options, and various styling options.
* In KwikID's VideoKYC platform, select inputs are used for document type selection,
* location data, verification methods, and regulatory compliance options.
*
* ## Usage
*
* ```jsx
* import { KwikUIInputSelect } from 'react-kwikui';
*
* const options = [
* { label: 'Option 1', value: '1' },
* { label: 'Option 2', value: '2' },
* { label: 'Option 3', value: '3' }
* ];
*
* const [value, setValue] = useState(null);
*
* const handleChange = (id, selectedValue) => {
* setValue(selectedValue);
* };
*
* <KwikUIInputSelect
* id="example-select"
* label="Select an option"
* options={options}
* value={value}
* onInput={handleChange}
* />
* ```
*/
var _default = exports.default = {
title: "KwikUI/Inputs/Select",
component: _InputSelect.default,
parameters: {
componentSubtitle: "Dropdown menu for selecting verification documents and regulatory options",
docs: {
description: {
component: "The Select Input component provides a user-friendly dropdown interface for selecting identity document types, verification methods, and other options required for KYC and VideoKYC processes compliant with RBI and UIDAI guidelines."
}
},
a11y: {
config: {
rules: [{
id: "label-content",
enabled: true
}]
}
}
},
argTypes: {
size: {
control: "radio",
options: _InputSelect2.KWIKUI_INPUT_SELECT__SIZE__OPTIONS,
description: "The size of the select input",
table: {
type: {
summary: "string"
},
defaultValue: {
summary: _InputSelect3.KWIKUI_INPUT_SELECT__DEFAULTS.size
}
}
},
shape: {
control: "radio",
options: _InputSelect2.KWIKUI_INPUT_SELECT__SHAPE__OPTIONS,
description: "The shape of the select input",
table: {
type: {
summary: "string"
},
defaultValue: {
summary: _InputSelect3.KWIKUI_INPUT_SELECT__DEFAULTS.shape
}
}
},
updateOn: {
control: "radio",
options: _InputSelect2.KWIKUI_INPUT_SELECT__UPDATE_ON__OPTIONS,
description: "When to trigger the input event",
table: {
type: {
summary: "string"
},
defaultValue: {
summary: _InputSelect3.KWIKUI_INPUT_SELECT__DEFAULTS.updateOn
}
}
},
variant: {
control: "radio",
options: _InputSelect2.KWIKUI_INPUT_SELECT__VARIANT__OPTIONS,
description: "The variant of the select input",
table: {
type: {
summary: "string"
}
}
},
value: {
control: "object",
description: "The currently selected value(s)",
table: {
type: {
summary: "object | array"
},
defaultValue: {
summary: _InputSelect3.KWIKUI_INPUT_SELECT__DEFAULTS.value
}
}
},
options: {
control: "object",
description: "Array of options to display in the dropdown",
table: {
type: {
summary: "Array<TKwikUIInputSelectOption>"
},
defaultValue: {
summary: "[]"
}
}
},
isSearchable: {
control: "boolean",
description: "Whether the input allows searching through options",
table: {
type: {
summary: "boolean"
},
defaultValue: {
summary: _InputSelect3.KWIKUI_INPUT_SELECT__DEFAULTS.isSearchable
}
}
},
isClearable: {
control: "boolean",
description: "Whether the input has a clear button",
table: {
type: {
summary: "boolean"
},
defaultValue: {
summary: _InputSelect3.KWIKUI_INPUT_SELECT__DEFAULTS.isClearable
}
}
},
placeholder: {
control: "text",
description: "Placeholder text for the input",
table: {
type: {
summary: "string"
},
defaultValue: {
summary: _InputSelect3.KWIKUI_INPUT_SELECT__DEFAULTS.placeholder
}
}
},
label: {
control: "text",
description: "Label text for the input field",
table: {
type: {
summary: "string"
},
defaultValue: {
summary: _InputSelect3.KWIKUI_INPUT_SELECT__DEFAULTS.label
}
}
},
disabled: {
control: "boolean",
description: "Whether the input is disabled",
table: {
type: {
summary: "boolean"
},
defaultValue: {
summary: _InputSelect3.KWIKUI_INPUT_SELECT__DEFAULTS.disabled
}
}
},
required: {
control: "boolean",
description: "Whether the input is required",
table: {
type: {
summary: "boolean"
},
defaultValue: {
summary: _InputSelect3.KWIKUI_INPUT_SELECT__DEFAULTS.required
}
}
},
id: {
control: "text",
description: "The ID of the select component",
table: {
type: {
summary: "string"
},
defaultValue: {
summary: _InputSelect3.KWIKUI_INPUT_SELECT__DEFAULTS.id
}
}
},
customStyles: {
control: "object",
description: "Custom styles to apply to different parts of the component",
table: {
type: {
summary: "object"
},
defaultValue: {
summary: "{ inputWrapper: {}, inputContainer: {}, inputLabel: {}, input: {} }"
}
}
},
messages: {
description: "Array of message objects to display (error, info, etc.)",
table: {
type: {
summary: "Array<IKwikUIMessage>"
},
defaultValue: {
summary: "[]"
}
}
},
onInput: {
description: "Function called when the selected value changes",
table: {
type: {
summary: "(id: string, value: any) => void"
}
}
},
onInputValidate: {
description: "Function to validate input value",
table: {
type: {
summary: "(id: string, value: any) => { isValid: boolean } | undefined | null"
}
}
}
}
}; // Define options for Indian document types
const DOCUMENT_TYPE_OPTIONS = (0, _InputSelect5.transformOptions)([{
key: "aadhaar",
label: "Aadhaar Card",
value: "aadhaar",
description: "UIDAI issued 12-digit unique identification number"
}, {
key: "pan",
label: "PAN Card",
value: "pan",
description: "Permanent Account Number issued by Income Tax Department"
}, {
key: "voter_id",
label: "Voter ID Card",
value: "voter_id",
description: "Election Commission of India issued voter identification"
}, {
key: "driving_license",
label: "Driving License",
value: "driving_license",
description: "Government issued driving license"
}, {
key: "passport",
label: "Passport",
value: "passport",
description: "Indian passport issued by Ministry of External Affairs"
}]);
// Define options for Indian states
const INDIAN_STATES_OPTIONS = (0, _InputSelect5.transformOptions)([{
key: "mh",
label: "Maharashtra",
value: "mh",
description: "State in Western India with capital Mumbai"
}, {
key: "dl",
label: "Delhi",
value: "dl",
description: "National Capital Territory"
}, {
key: "ka",
label: "Karnataka",
value: "ka",
description: "State in Southern India with capital Bangalore"
}, {
key: "tn",
label: "Tamil Nadu",
value: "tn",
description: "State in Southern India with capital Chennai"
}, {
key: "gj",
label: "Gujarat",
value: "gj",
description: "State in Western India with capital Gandhinagar"
}, {
key: "up",
label: "Uttar Pradesh",
value: "up",
description: "Most populous state in Northern India"
}, {
key: "wb",
label: "West Bengal",
value: "wb",
description: "State in Eastern India with capital Kolkata"
}, {
key: "tg",
label: "Telangana",
value: "tg",
description: "State in South India with capital Hyderabad"
}, {
key: "ap",
label: "Andhra Pradesh",
value: "ap",
description: "State in South India"
}
// More states would be included in a real implementation
]);
// Define options for Indian banks
const INDIAN_BANKS_OPTIONS = (0, _InputSelect5.transformOptions)([{
key: "sbi",
label: "State Bank of India",
value: "sbi",
description: "India's largest public sector bank"
}, {
key: "hdfc",
label: "HDFC Bank",
value: "hdfc",
description: "India's largest private sector bank"
}, {
key: "icici",
label: "ICICI Bank",
value: "icici",
description: "Major private sector bank"
}, {
key: "axis",
label: "Axis Bank",
value: "axis",
description: "Third-largest private sector bank"
}, {
key: "pnb",
label: "Punjab National Bank",
value: "pnb",
description: "Large public sector bank"
}, {
key: "kotak",
label: "Kotak Mahindra Bank",
value: "kotak",
description: "Private sector banking and financial services company"
}, {
key: "bob",
label: "Bank of Baroda",
value: "bob",
description: "Public sector bank with international presence"
}, {
key: "yes",
label: "Yes Bank",
value: "yes",
description: "Private sector bank"
}
// More banks would be included in a real implementation
]);
// Define options for verification statuses
const VERIFICATION_STATUS_OPTIONS = (0, _InputSelect5.transformOptions)([{
key: "pending",
label: "Pending Verification",
value: "pending",
description: "Documents uploaded but not yet verified"
}, {
key: "in_progress",
label: "Verification In Progress",
value: "in_progress",
description: "Documents are currently being verified"
}, {
key: "verified",
label: "Verified",
value: "verified",
description: "Documents successfully verified"
}, {
key: "rejected",
label: "Rejected",
value: "rejected",
description: "Documents rejected due to issues"
}, {
key: "manual_review",
label: "Manual Review Required",
value: "manual_review",
description: "Documents flagged for manual review by KYC officer"
}, {
key: "expired",
label: "Verification Expired",
value: "expired",
description: "Verification has expired and needs renewal"
}]);
// Define options for KYC methods
const KYC_METHOD_OPTIONS = (0, _InputSelect5.transformOptions)([{
key: "video_kyc",
label: "Video KYC",
value: "video_kyc",
description: "Real-time video verification with KYC officer as per RBI guidelines"
}, {
key: "e_kyc",
label: "Aadhaar e-KYC",
value: "e_kyc",
description: "Electronic KYC using Aadhaar OTP authentication"
}, {
key: "offline_kyc",
label: "Offline Aadhaar KYC",
value: "offline_kyc",
description: "KYC using Aadhaar XML file verification"
}, {
key: "v_cip",
label: "V-CIP Process",
value: "v_cip",
description: "Video-based Customer Identification Process"
}, {
key: "in_person",
label: "In-Person Verification",
value: "in_person",
description: "Traditional in-person KYC verification"
}, {
key: "digital_kyc",
label: "Digital KYC",
value: "digital_kyc",
description: "Digital verification through app-based processes"
}]);
/**
* Template for rendering the standard InputSelect component
*/
const Template = args => {
const [selectValue, setSelectValue] = _react.default.useState(null);
const onChangeInput = (id, value) => {
setSelectValue(value);
};
const onChangeInputValidate = (id, value) => {
var _value$value;
if ((0, _kwikidToolkit.isNotEmptyValue)(value) && (_value$value = value.value) !== null && _value$value !== void 0 && _value$value.toString().includes("3_stars")) {
return {
isValid: true
};
}
if ((0, _kwikidToolkit.isNotEmptyValue)(value)) {
return {
isValid: false
};
}
return null;
};
return /*#__PURE__*/_react.default.createElement(_InputSelect.default, _extends({}, args, {
onInput: onChangeInput,
onInputValidate: onChangeInputValidate,
value: selectValue
}));
};
/**
* Template for rendering the InputMultiSelect component
*/
const TemplateMultiple = args => {
const [multiSelectValue, setMultiSelectValue] = _react.default.useState([]);
const onChangeInputMultiple = (id, value) => {
setMultiSelectValue(value);
};
const onChangeInputMultipleValidate = (_id, _value) => {
return {
isValid: true
};
};
return /*#__PURE__*/_react.default.createElement(_InputMultiSelect.default, _extends({}, args, {
onInput: onChangeInputMultiple,
onInputValidate: onChangeInputMultipleValidate,
value: multiSelectValue
}));
};
/**
* Document type selection for KYC
*/
const Default = exports.Default = Template.bind({});
Default.args = _objectSpread(_objectSpread({}, _InputSelect3.KWIKUI_INPUT_SELECT__DEFAULTS), {}, {
id: "document-type",
label: "Identity Document Type",
placeholder: "Select identity proof document",
options: DOCUMENT_TYPE_OPTIONS,
required: true
});
Default.parameters = {
docs: {
description: {
story: "Default select input for choosing identity document types during the KYC process. Helps customers select which government-issued ID they want to verify in the KwikID platform."
}
}
};
/**
* Document type multi selection for KYC
*/
const Dropdown = exports.Dropdown = Template.bind({});
Dropdown.args = _objectSpread(_objectSpread({}, _InputSelect3.KWIKUI_INPUT_SELECT__DEFAULTS), {}, {
id: "document-type",
label: "Identity Document Type",
placeholder: "Select identity proof document",
options: DOCUMENT_TYPE_OPTIONS,
required: true,
variant: _InputSelect4.IKwikUIInputSelectVariant.DROPDOWN
});
Dropdown.parameters = {
docs: {
description: {
story: "Default select input for choosing identity document types during the KYC process. Helps customers select which government-issued ID they want to verify in the KwikID platform."
}
}
};
/**
* Select input with different shapes
*/
const Shapes = () => {
return /*#__PURE__*/_react.default.createElement("div", {
style: {
display: "flex",
flexDirection: "column",
gap: "2rem"
}
}, /*#__PURE__*/_react.default.createElement(_InputSelect.default, {
id: "select-curved",
label: "Document Type",
shape: "curved",
placeholder: "Select identity document",
options: DOCUMENT_TYPE_OPTIONS,
value: null
}), /*#__PURE__*/_react.default.createElement(_InputSelect.default, {
id: "select-rectangle",
label: "Verification Type",
shape: "rectangle",
placeholder: "Select verification method",
options: KYC_METHOD_OPTIONS,
value: null
}), /*#__PURE__*/_react.default.createElement(_InputSelect.default, {
id: "select-rounded",
label: "State of Residence",
shape: "rounded",
placeholder: "Select your state",
options: INDIAN_STATES_OPTIONS,
value: null
}));
};
exports.Shapes = Shapes;
Shapes.parameters = {
docs: {
description: {
story: "Select inputs with different shapes to fit various form contexts in the KYC verification flow. Each shape variation can be used for different types of input fields depending on the UI requirements."
},
controls: {
disable: true
}
}
};
/**
* Select input with different sizes
*/
const Sizes = () => {
return /*#__PURE__*/_react.default.createElement("div", {
style: {
display: "flex",
flexDirection: "column",
gap: "2rem"
}
}, /*#__PURE__*/_react.default.createElement(_InputSelect.default, {
id: "select-xs",
size: "xs",
label: "City (XS)",
placeholder: "Select city",
options: INDIAN_STATES_OPTIONS,
value: null
}), /*#__PURE__*/_react.default.createElement(_InputSelect.default, {
id: "select-s",
size: "s",
label: "Bank Branch (S)",
placeholder: "Select branch",
options: INDIAN_BANKS_OPTIONS,
value: null
}), /*#__PURE__*/_react.default.createElement(_InputSelect.default, {
id: "select-m",
size: "m",
label: "Identity Document (M - Default)",
placeholder: "Select document type",
options: DOCUMENT_TYPE_OPTIONS,
value: null
}), /*#__PURE__*/_react.default.createElement(_InputSelect.default, {
id: "select-l",
size: "l",
label: "Bank Name (L)",
placeholder: "Select your bank",
options: INDIAN_BANKS_OPTIONS,
value: null
}), /*#__PURE__*/_react.default.createElement(_InputSelect.default, {
id: "select-xl",
size: "xl",
label: "Verification Method (XL)",
placeholder: "Select verification method",
options: KYC_METHOD_OPTIONS,
value: null
}), /*#__PURE__*/_react.default.createElement(_InputSelect.default, {
id: "select-xxl",
size: "xxl",
label: "Document Status (XXL)",
placeholder: "Select document status",
options: VERIFICATION_STATUS_OPTIONS,
value: null
}));
};
exports.Sizes = Sizes;
Sizes.parameters = {
docs: {
description: {
story: "Select inputs in different sizes to accommodate various form layouts in the KwikID platform. Size variations allow for effective visual hierarchy in complex KYC forms with multiple input types."
},
controls: {
disable: true
}
}
};
/**
* Multi-select for document submission
*/
const MultiSelect = exports.MultiSelect = TemplateMultiple.bind({});
MultiSelect.args = _objectSpread(_objectSpread({}, _InputSelect3.KWIKUI_INPUT_SELECT__DEFAULTS), {}, {
id: "additional-documents",
label: "Additional Supporting Documents",
placeholder: "Select all applicable documents",
options: (0, _InputSelect5.transformOptions)([{
key: "utility_bill",
label: "Utility Bill",
value: "utility_bill",
description: "Electricity, water, or gas bill for address proof"
}, {
key: "bank_statement",
label: "Bank Statement",
value: "bank_statement",
description: "Last 3 months bank statement for financial verification"
}, {
key: "rent_agreement",
label: "Rent Agreement",
value: "rent_agreement",
description: "Rental agreement as address proof"
}, {
key: "property_tax",
label: "Property Tax Receipt",
value: "property_tax",
description: "Property tax receipt as ownership proof"
}, {
key: "payslip",
label: "Salary Slip",
value: "payslip",
description: "Latest salary slip for income verification"
}])
});
MultiSelect.parameters = {
docs: {
description: {
story: "Multi-select input for choosing additional supporting documents during the KYC process. Allows customers to submit multiple supplementary documents to strengthen their verification as per RBI guidelines."
}
}
};
/**
* Non-searchable branch selection
*/
const NonSearchable = exports.NonSearchable = Template.bind({});
NonSearchable.args = _objectSpread(_objectSpread({}, _InputSelect3.KWIKUI_INPUT_SELECT__DEFAULTS), {}, {
id: "branch-select",
label: "Select Nearest Branch",
placeholder: "Choose your nearest branch",
options: (0, _InputSelect5.transformOptions)([{
key: "chandivali",
label: "Chandivali, Mumbai",
value: "chandivali",
description: "Think360.AI office in Chandivali, Mumbai"
}, {
key: "bandra",
label: "Bandra West, Mumbai",
value: "bandra",
description: "KwikID service center in Bandra"
}, {
key: "andheri",
label: "Andheri East, Mumbai",
value: "andheri",
description: "VideoKYC support center near Andheri station"
}]),
isSearchable: false
});
NonSearchable.parameters = {
docs: {
description: {
story: "Select input with search functionality disabled for branch selection with limited options. Used when the list of options is small enough that searching is unnecessary."
}
}
};
/**
* Non-clearable required selection
*/
const NonClearable = exports.NonClearable = Template.bind({});
NonClearable.args = _objectSpread(_objectSpread({}, _InputSelect3.KWIKUI_INPUT_SELECT__DEFAULTS), {}, {
id: "id-proof-type",
label: "Primary Identity Proof Type",
placeholder: "Select mandatory ID proof",
options: DOCUMENT_TYPE_OPTIONS,
isClearable: false,
required: true
});
NonClearable.parameters = {
docs: {
description: {
story: "Non-clearable select input for mandatory document selection during KYC. Once a customer selects their primary ID proof, they cannot clear the selection as it's required by RBI guidelines for VideoKYC."
}
}
};
/**
* Select with info messages
*/
const WithMessages = exports.WithMessages = Template.bind({});
WithMessages.args = _objectSpread(_objectSpread({}, _InputSelect3.KWIKUI_INPUT_SELECT__DEFAULTS), {}, {
id: "aadhaar-verification",
label: "Aadhaar Verification Method",
placeholder: "Select verification method",
options: (0, _InputSelect5.transformOptions)([{
key: "otp",
label: "OTP Verification",
value: "otp",
description: "Verify using OTP sent to registered mobile"
}, {
key: "biometric",
label: "Biometric Verification",
value: "biometric",
description: "Verify using fingerprint or iris scan"
}, {
key: "offline",
label: "Offline XML Verification",
value: "offline",
description: "Verify using downloaded Aadhaar XML"
}]),
messages: [{
type: "info",
message: "As per UIDAI guidelines, select the Aadhaar verification method you prefer"
}]
});
WithMessages.parameters = {
docs: {
description: {
story: "Select input with informational message explaining verification options as per UIDAI guidelines. Helps customers understand different Aadhaar verification methods available in the KwikID platform."
}
}
};
/**
* Select with custom styles
*/
const CustomStyles = exports.CustomStyles = Template.bind({});
CustomStyles.args = _objectSpread(_objectSpread({}, _InputSelect3.KWIKUI_INPUT_SELECT__DEFAULTS), {}, {
id: "premium-verification",
label: "Premium Verification Service",
placeholder: "Select premium service",
options: (0, _InputSelect5.transformOptions)([{
key: "priority",
label: "Priority Verification",
value: "priority",
description: "Get verification done within 2 hours"
}, {
key: "doorstep",
label: "Doorstep Verification",
value: "doorstep",
description: "KYC officer visits your location"
}, {
key: "instant",
label: "Instant Approval",
value: "instant",
description: "Immediate verification for pre-approved customers"
}]),
customStyles: {
inputWrapper: {
backgroundColor: "#f8f0ff"
},
inputLabel: {
color: "#6a0dad",
fontWeight: "bold"
},
input: {
borderColor: "#6a0dad"
}
}
});
CustomStyles.parameters = {
docs: {
description: {
story: "Select input with custom styling to highlight premium verification services offered by Think360.AI. The distinctive visual treatment helps differentiate premium options in the KwikID platform."
}
}
};
/**
* Disabled select input
*/
const Disabled = exports.Disabled = Template.bind({});
Disabled.args = _objectSpread(_objectSpread({}, _InputSelect3.KWIKUI_INPUT_SELECT__DEFAULTS), {}, {
id: "disabled-select",
label: "Document Verification Status (System Generated)",
placeholder: "Status is automatically determined",
options: VERIFICATION_STATUS_OPTIONS,
disabled: true,
value: {
key: "in_progress",
label: "Verification In Progress",
value: "in_progress"
}
});
Disabled.parameters = {
docs: {
description: {
story: "Disabled select input for displaying system-generated information that cannot be modified by the customer. Used for showing verification status determined by the KwikID platform."
}
}
};
/**
* Select input with validation
*/
const WithValidation = () => {
var _validateSelect;
const [value, setValue] = _react.default.useState(null);
const validateSelect = (id, inputValue) => {
var _inputValue$value;
if ((0, _kwikidToolkit.isNotEmptyValue)(inputValue) && ((_inputValue$value = inputValue.value) === null || _inputValue$value === void 0 ? void 0 : _inputValue$value.toString()) === "video_kyc") {
return {
isValid: true
};
}
if ((0, _kwikidToolkit.isNotEmptyValue)(inputValue)) {
return {
isValid: false
};
}
return null;
};
return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "Select "e;Video KYC"e; for valid selection. Any other option will show as invalid."), /*#__PURE__*/_react.default.createElement(_InputSelect.default, {
id: "validation-select",
label: "KYC Method",
placeholder: "Select verification method",
options: KYC_METHOD_OPTIONS,
required: true,
value: value,
onInput: (id, val) => setValue(val),
onInputValidate: validateSelect,
messages: value ? [(_validateSelect = validateSelect("", value)) !== null && _validateSelect !== void 0 && _validateSelect.isValid ? {
type: "success",
message: "Valid selection!"
} : {
type: "error",
message: "Please select 'Video KYC'."
}] : []
}));
};
exports.WithValidation = WithValidation;
WithValidation.parameters = {
docs: {
description: {
story: "Select input with validation logic to enforce specific requirements. In this example, only the Video KYC method is considered valid as per the current promotional campaign at Think360.AI."
},
controls: {
disable: true
}
}
};
/**
* Searchable bank selection
*/
const Searchable = exports.Searchable = Template.bind({});
Searchable.args = _objectSpread(_objectSpread({}, _InputSelect3.KWIKUI_INPUT_SELECT__DEFAULTS), {}, {
id: "searchable-bank-select",
label: "Select Your Bank",
placeholder: "Type to search for your bank",
options: INDIAN_BANKS_OPTIONS,
isSearchable: true
});
Searchable.parameters = {
docs: {
description: {
story: "Searchable select input for bank selection, enabling customers to quickly find their bank from a long list. Essential for a seamless banking verification experience in the KYC process."
}
}
};
/**
* Select with clearable option
*/
const Clearable = exports.Clearable = Template.bind({});
Clearable.args = _objectSpread(_objectSpread({}, _InputSelect3.KWIKUI_INPUT_SELECT__DEFAULTS), {}, {
id: "clearable-select",
label: "Optional Secondary ID Proof",
placeholder: "Select additional ID proof (optional)",
options: DOCUMENT_TYPE_OPTIONS,
isClearable: true
});
Clearable.parameters = {
docs: {
description: {
story: "Clearable select input allowing users to reset their selection. Useful for optional document selections in the KYC process when customers may need to change their choice."
}
}
};