🔀 merge: Merge branch 'common' of https://github.com/KieIO/grocery-vercel-commerce into m2-quangnhan

:%s

src/components/common/InputCommon/InputCommon.tsx

@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import React, { forwardRef, useImperativeHandle, useRef } from 'react';
 import { KEY } from 'src/utils/constanst.utils';
 import s from './InputCommon.module.scss';
@@ -5,23 +6,30 @@ import s from './InputCommon.module.scss';
 type Ref = {
     focus: () => void
 } | null;
-
 interface Props {
     children?: React.ReactNode,
     value?: string | number,
     placeholder?: string,
-    type?: 'text' | 'number',
+    type?: 'text' | 'number' | 'email',
+    styleType?: 'default' | 'custom',
+    backgroundTransparent?: boolean,
+    icon?: React.ReactNode,
     onChange?: (value: string | number) => void,
     onEnter?: (value: string | number) => void,
 }
 
-const InputCommon = forwardRef<Ref, Props>(({ value, placeholder, type, onChange, onEnter }: Props, ref) => {
+const InputCommon = forwardRef<Ref, Props>(({ value, placeholder, type, styleType = 'default', icon, backgroundTransparent = false,
+    onChange, onEnter }: Props, ref) => {
     const inputElementRef = useRef<HTMLInputElement>(null);
 
     useImperativeHandle(ref, () => ({
         focus: () => {
             inputElementRef.current?.focus();
         },
+        getValue: () => {
+            const value = inputElementRef.current?.value || ''
+            return value
+        }
     }));
 
     const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -36,15 +44,24 @@ const InputCommon = forwardRef<Ref, Props>(({ value, placeholder, type, onChange
     }
 
     return (
-        <input
-            ref={inputElementRef}
-            value={value}
-            type={type}
-            placeholder={placeholder}
-            onChange={handleChange}
-            onKeyDown={handleKeyDown}
-            className={s.inputCommon}
-        />
+        <div className={s.inputWrap}>
+            {
+                icon && <span className={s.icon}>{icon}</span>
+            }
+            <input
+                ref={inputElementRef}
+                value={value}
+                type={type}
+                placeholder={placeholder}
+                onChange={handleChange}
+                onKeyDown={handleKeyDown}
+                className={classNames({
+                    [s.inputCommon]: true,
+                    [s[styleType]]: true,
+                    [s.bgTransparent]: backgroundTransparent
+                })}
+            />
+        </div>
     )
 
 })